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>