Nav

Ready Added in 2.0.0

Defines different styles for list navigations.

Usage

To apply this component, use the following classes.

Class Description
.gls-nav Add this class to a <ul> element to define the Nav component. Use <a> elements as nav items within the list.
.gls-active Add this class to a list item to apply an active state to a menu item. 
<ul class="gls-nav">
    <li class="gls-active"><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

  • <div class="gls-width-1-2@s gls-width-2-5@m">
    <ul class="gls-nav gls-nav-default">
        <li class="gls-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Note By default, the nav has no styling. That’s why it is important to add a modifier class. In our example we are using the .gls-nav-default class.

Guidelines

When to use

  • To allow users to move between pages in a specific subsection of your application

When to consider something else

  • For top-level navigation, use components like the Navbar and Breadcrumbs
  • For navigation between steps of a process that’s been split across multiple pages, use the Stepper
  • To allow users to switch between chunks of related content without having to leave the current page, use Tabs

Implementation notes

  • Keep navigation labels short (1-2 words)

Accessibility notes

  • Add the aria-current="page" attribute to a navigation link to indicate the current page

Nested navs

Add the .gls-parent class to an item to turn it into a parent. Add the .gls-nav-sub class to a <ul> element inside the item to create the subnav.

<ul class="gls-nav">
    <li class="gls-parent">
        <a href=""></a>
        <ul class="gls-nav-sub">
            <li><a href=""></a></li>
            <li>
                <a href=""></a>
                <ul>...</ul>
            </li>
        </ul>
    </li>
</ul>

  • <div class="gls-width-1-2@s gls-width-2-5@m">
    <ul class="gls-nav gls-nav-default">
        <li class="gls-active"><a href="#">Active</a></li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

Accordion

By default, child menu items are always visible. To apply an accordion effect, just add the gls-nav attribute to the main <ul>. Add the .gls-nav-parent-icon class to apply icons, indicating parent items.

Note The attribute automatically sets the .gls-nav class, so you don’t have to apply it manually.

<ul class="gls-nav-parent-icon" gls-nav>...</ul>

  • <div class="gls-width-1-2@s gls-width-2-5@m">
    <ul class="gls-nav-default gls-nav-parent-icon" gls-nav>
        <li class="gls-active"><a href="#">Active</a></li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

Multiple open subnavs

When clicking on a parent item, an open one will close, allowing only one open nested list at a time. To allow multiple open subnavs, just add the multiple: true option to the attribute.

<ul class="gls-nav-parent-icon" gls-nav="multiple: true">...</ul>

  • <div class="gls-width-1-2@s gls-width-2-5@m">
    <ul class="gls-nav-default gls-nav-parent-icon" gls-nav="multiple: true">
        <li class="gls-active"><a href="#">Active</a></li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li>
                    <a href="#">Sub item</a>
                    <ul>
                        <li><a href="#">Sub item</a></li>
                        <li><a href="#">Sub item</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
    </ul>
</div>

Header & divider

Add one of the following classes to a list item to create a header or a divider between items.

Element Description
.gls-nav-header Add this class to a <li> element to create a header.
.gls-nav-divider Add this class to a <li> element to create a divider separating nav items. 
<li class="gls-nav-header"></li>

<li class="gls-nav-divider"></li>

  • <div class="gls-width-1-2@s gls-width-2-5@m">
    <ul class="gls-nav gls-nav-default">
        <li class="gls-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Default modifier

Add the .gls-nav-default class to give the nav its default style. You can place the nav inside cards or anywhere else in your content.

<ul class="gls-nav gls-nav-default">...</ul>

  • <div class="gls-card gls-card-default gls-card-body gls-width-1-2@s">
    <ul class="gls-nav-default gls-nav-parent-icon" gls-nav>
        <li class="gls-active"><a href="#">Active</a></li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="gls-nav-header">Header</li>
        <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: table"></span> Item</a></li>
        <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: thumbnails"></span> Item</a></li>
        <li class="gls-nav-divider"></li>
        <li><a href="#"><span class="gls-margin-small-right" gls-icon="icon: trash"></span> Item</a></li>
    </ul>
</div>

Primary modifier

Add the .gls-nav-primary class to give the nav a more distinct styling, for example when placing it inside a modal.

<ul class="gls-nav gls-nav-primary">...</ul>

  • <div class="gls-width-1-2@s">
    <ul class="gls-nav-primary gls-nav-parent-icon" gls-nav>
        <li class="gls-active"><a href="#">Active</a></li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li class="gls-parent">
            <a href="#">Parent</a>
            <ul class="gls-nav-sub">
                <li><a href="#">Sub item</a></li>
                <li><a href="#">Sub item</a></li>
            </ul>
        </li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Center modifier

Add the .gls-nav-center class to center nav items. This can be combined with the default and primary style modifiers.

<ul class="gls-nav gls-nav-default gls-nav-center">...</ul>

  • <div class="gls-card gls-card-default gls-card-body gls-width-1-2@s">
    <ul class="gls-nav-default gls-nav-center gls-nav-parent-icon" gls-nav>
        <li class="gls-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Divider modifier

Add the .gls-nav-divider class to separate nav items with lines. This can be combined with the default and primary style modifiers.

<ul class="gls-nav gls-nav-default gls-nav-divider">...</ul>

<div class="gls-width-1-2@s">
    <ul class="gls-nav-default gls-nav-divider" gls-nav>
        <li class="gls-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Add the .gls-dropdown-nav class to place a nav inside a default dropdown from the Dropdown component.

<div gls-dropdown>
    <ul class="gls-nav gls-dropdown-nav">...</ul>
</div>

  • <button class="gls-button gls-button-default" type="button">Hover</button>
<div gls-dropdown>
    <ul class="gls-nav gls-dropdown-nav">
        <li class="gls-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="gls-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Add the .gls-navbar-dropdown-nav class to place the nav inside a navbar dropdown from the Navbar component.

<div class="gls-navbar-dropdown">
    <ul class="gls-nav gls-navbar-dropdown-nav">...</ul>
</div>

  • <nav class="gls-navbar-container" gls-navbar>
    <div class="gls-navbar-left">

        <ul class="gls-navbar-nav">
            <li>
                <a href="#">Parent</a>
                <div class="gls-navbar-dropdown">
                    <ul class="gls-nav gls-navbar-dropdown-nav">
                        <li class="gls-active"><a href="#">Active</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="gls-nav-header">Header</li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li class="gls-nav-divider"></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </div>
            </li>
        </ul>

    </div>
</nav>

A nav can be used inside an off-canvas from the Off-canvas component. No modifier class needs to be added.

  • Open 
  • <a href="#offcanvas-slide" class="gls-button gls-button-default" gls-toggle>Open</a>

<div id="offcanvas-slide" gls-offcanvas>
    <div class="gls-offcanvas-bar">

        <ul class="gls-nav gls-nav-default">
            <li class="gls-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="gls-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>

    </div>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

Option Value Default Description
targets CSS selector > .gls-parent The element(s) to toggle.
toggle CSS selector > a The toggle element(s).
content CSS selector > ul The content element(s).
collapsible Boolean true Allow all items to be closed.
multiple Boolean false Allow multiple open items.
transition String ease The transition to use.
animation String true The space separated names of animations to use. Comma separate for animation out.
duration Number 200 The animation duration in milliseconds.

JavaScript

Learn more about JavaScript components.

Initialization

Gloss.nav(element, options);

Methods

The following methods are available for the component:

Toggle

Gloss.nav(element).toggle(index, animate);

Toggles the content pane.

Name Type Default Description
index String, Number, Node 0 Nav pane to toggle. 0 based index.
animate Boolean true Suppress opening animation by passing false.