Iconnav

Ready Added in 2.0.0

Create a navigation consisting of icons.

Usage

To apply this component, add the .gls-iconnav class to a <ul> element. Use <a> elements as menu items within the list and add icons from the Icon component. To apply an active state to a menu item, just add the .gls-active class.

<ul class="gls-iconnav">
    <li><a href="" gls-icon="icon: check"></a></li>
</ul>
  • <ul class="gls-iconnav">
        <li><a href="#" gls-icon="icon: plus"></a></li>
        <li><a href="#" gls-icon="icon: pencil"></a></li>
        <li><a href="#" gls-icon="icon: copy"></a></li>
        <li><a href="#"><span gls-icon="icon: trash"></span> (2)</a></li>
    </ul>
    

Vertical alignment

By default, the items of an iconnav are aligned horizontally. To apply a vertical alignment, add the .gls-iconnav-vertical class.

<ul class="gls-iconnav gls-iconnav-vertical">...</ul>
  • <ul class="gls-iconnav gls-iconnav-vertical">
        <li><a href="#" gls-icon="icon: plus"></a></li>
        <li><a href="#" gls-icon="icon: pencil"></a></li>
        <li><a href="#" gls-icon="icon: copy"></a></li>
        <li><a href="#"><span gls-icon="icon: trash"></span> (2)</a></li>
    </ul>