We are working on something new! Check it out here!

Dropdown menu

Modifiers

  • .dropdown-menu-arrow - Adds arrow to the dropdown menu
  • .dropdown-menu-arrow-right - Moves the arrow to the right edge

Example

Actions
<span class="dropdown">
    <span class="btn btn-primary dropdown-toggle">Actions</span>
    <ul class="dropdown-menu">
        <li><a href="#">Open</a></li>
        <li><a href="#">Delete</a></li>
        <li class="divider"></li>
        <li><a href="#">Add new</a></li>
    </ul>
</span>
Source file: ~/source/sass/components/dropdown/_dropdown.scss

Indicate the current page's location within a navigational hierarchy using breadcrumbs.

Example

<ul class="breadcrumbs">
    <li><a href="#">Cupkae</a></li>
    <li><a href="#">Liquorice</a></li>
    <li>Gummi bears</li>
</ul>
Source file: ~/source/sass/components/navigation/_breadcrumb.scss

Vertical navigation a.k.a sidebar navigation with nestled sub menu support.

Modifiers

  • .has-children - Indicates if a menu item has children (sub menu)
  • .current-node - Indicates the currently active parent node
  • .current - Indicates currently active menu item

Example

<nav>
    <ul class="nav-aside">
        <li><a href="#">Sweet apple pie</a></li>
        <li class="has-children"><a href="#">Chocolate bar</a></li>
        <li class="current-node has-children">
            <a href="#">Marshmallow</a>
            <ul class="sub-menu">
                <li><a href="#">Caramels</a></li>
                <li class="current"><a href="#">Sweet roll.</a></li>
                <li><a href="#">Ice cream</a></li>
            </ul>
        </li>
        <li><a href="#">Pudding</a></li>
    </ul>
</nav>
Source file: ~/source/sass/components/navigation/_nav.scss

The navbar is typically used for the main menu. Using the class .nav-justify on the ul element will make the menu items fill the width of the navbar container.

Modifiers

  • .current - Indicates the currently active menu item

Example

<nav class="navbar hidden-xs hidden-sm">
    <div class="container">
        <div class="grid">
            <div class="grid-sm-12">
                <ul class="nav nav-justify">
                    <li><a href="#">Brownie</a></li>
                    <li><a href="#">Fruitcake</a></li>
                    <li><a href="#">Pie</a></li>
                    <li><a href="#">Sweet lemon drops</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
Source file: ~/source/sass/components/navigation/_navbar.scss

Pagination

Standard pagination.

Modifiers

  • .current - The currently active page number
  • .paging-lg - Bigger paging

Example

<ul class="pagination">
    <li><a class="prev" href="#">« Previous</a></li>
    <li><a class="page" href="#">1</a></li>
    <li class="ellipsis"></li>
    <li><a class="page" href="#">2</a></li>
    <li><a class="page current" href="#">3</a></li>
    <li><a class="page" href="#">4</a></li>
    <li class="ellipsis"></li>
    <li><a class="page" href="#">15</a></li>
    <li><a class="next" href="#">Next »</a></li>
</ul>
Source file: ~/source/sass/components/navigation/_pagination.scss

Pills

Pills navigagtion

Example

<ul class="nav nav-pills nav-horizontal">
    <li><a href="#">Cupkae</a></li>
    <li><a href="#">Liquorice</a></li>
    <li><a href="#">Gummi bears</a></li>
</ul>
Source file: ~/source/sass/components/navigation/_pills.scss

Help

Help navigagtion

Example

<ul class="nav nav-help nav-horizontal">
    <li><a href="#">Cupkae</a></li>
    <li><a href="#">Liquorice</a></li>
    <li><a href="#">Gummi bears</a></li>
</ul>
Source file: ~/source/sass/components/navigation/_pills.scss

Vertical navbar

A vertical vanbar design to slide up & down in the content.

Modifiers

  • .current - The currently active dot

Example

<ul class="scroll-dots is-active">
    <li><a href="#1" data-link-tooltip="First item" data-tooltip-right></a></li>
    <li><a class="current" href="#2" data-link-tooltip="Second item"></a></li>
    <li><a href="#3"></a></li>
    <li><a href="#4"></a></li>
    <li><a href="#5"></a></li>
</ul>
Source file: ~/source/sass/components/navigation/_scroll-dots.scss

Horizontal navigation tabs

Modifiers

  • .current - The currently active tab

Example

<nav>
    <ul class="nav nav-tabs">
        <li><a href="#">Caramels</a></li>
        <li><a href="#">Croissants</a></li>
        <li><a href="#">Donuts</a></li>
    </ul>
</nav>
Source file: ~/source/sass/components/navigation/_tabs.scss

Tags

List of tags constructed to be shown below articles.

Modifiers

  • .show-tagsign - Show # before tag-text.

Example

<ul class="tags show-tagsign">
    <li><span class="tag"><a href="#">Cupcake</a></span></li>
    <li><span class="tag"><a href="#">Jelly-o</a></span></li>
    <li><span class="tag"><a href="#">Candy canes</a></span></li>
</ul>
Source file: ~/source/sass/components/navigation/_tags.scss