Subnav

Ready Added in 2.0.0

Defines different styles for a sub navigation.

Usage

To apply this component, use the following classes. To align a subnav, for example to horizontally center it, you can use the Flex component.

Class Description
.gls-subnav Add this class to a <ul> element to define the Subnav 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 add list items without a link, use a <span> element instead of an <a>. Alternatively, disable an <a> element by adding the .gls-disabled class to the <li> element and remove the href attribute from the anchor to make it inaccessible through keyboard navigation.

<ul class="gls-subnav">
    <li class="gls-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>

  • <ul class="gls-subnav" gls-margin>
    <li class="gls-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><span>Disabled</span></li>
</ul>

Note For a better layout, if items should wrap into the next row, add the gls-margin attribute from the Margin component.

Divider modifier

Add the .gls-subnav-divider class to separate menu items with lines.

<ul class="gls-subnav gls-subnav-divider">...</ul>

  • <ul class="gls-subnav gls-subnav-divider" gls-margin>
    <li class="gls-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

Pill modifier

Add the .gls-subnav-pill class to highlight the active menu item with a background.

<ul class="gls-subnav gls-subnav-pill">...</ul>

  • <ul class="gls-subnav gls-subnav-pill" gls-margin>
    <li class="gls-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
</ul>

You can also use a dropdown from the Dropdown component with a subnav.

<ul class="gls-subnav">
    <li>

        <!-- This is the menu item toggling the dropdown -->
        <a href=""></a>

        <!-- This is the dropdown -->
        <div gls-dropdown="mode: click">
            <ul class="gls-nav gls-dropdown-nav">...</ul>
        </div>

    </li>
</ul>

  • <ul class="gls-subnav gls-subnav-pill" gls-margin>
    <li class="gls-active"><a href="#">Active</a></li>
    <li><a href="#">Item</a></li>
    <li>
        <a href="#">More <span gls-icon="icon: triangle-down"></span></a>
        <div gls-dropdown="mode: click">
            <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>
    </li>
</ul>