Nav
Defines different styles for list navigations.
Usage
To apply this component, add the .f-nav
class to an <ul>
element. Use <a>
elements as menu items within the list. To apply an active state to a menu item, just add the .f-active
class.
Example
NOTE By default, the nav has no styling. That's why it is important to add a modifier class to give it some styling. In our examples we used the .f-nav-side
class.
Markup
<ul class="f-nav">
<li><a href="#">...</a></li>
<li class="f-active"><a href="#">...</a></li>
</ul>
Nested navs
You can easily add any number of <ul>
elements to your nav.
Class | Description |
---|---|
.f-nav-sub |
Add this class to the first nested <ul> for optimized spacing. |
.f-parent |
Add this class to indicate a parent menu item. |
.f-nav-parent-icon |
Add this class to the nav to add icons, indicating parent items. |
Example
Markup
<ul class="f-nav f-nav-parent-icon">
<li class="f-parent"><a href="#">...</a>
<ul class="f-nav-sub">
<li><a href="#">...</a>
<ul>...</ul>
</li>
</ul>
</li>
</ul>
Accordion
By default child menu items are always visible. To apply the accordion effect, just add the data-f-nav
attribute to the main <ul>
. When clicking on a parent item, an open one will close, allowing only one open nested list at a time. To avoid this behavior, just append {multiple:true}
to the data attribute.
Example
data-f-nav
data-f-nav="{multiple:true}"
Markup
<ul class="f-nav f-nav-parent-icon" data-f-nav>
<li class="f-parent">
<a href="#">...</a>
<ul class="f-nav-sub">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
</ul>
<ul class="f-nav f-nav-parent-icon" data-f-nav="{multiple:true}">
<li class="f-parent">
<a href="#">...</a>
<ul class="f-nav-sub">
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
</li>
</ul>
Header and divider
Add one of the following classes to a list item to create a header or a divider between items.
Class | Description |
---|---|
.f-nav-header |
Add this class to a <li> element to create a header. |
.f-nav-divider |
Add this class to a <li> element to create a divider separating menu items. |
NOTE You can also add subtitles to nav items. Just create a <div>
element inside the <a>
element within the list item.
Example
- Header
- Item Subtitle
- Item
- Item
Markup
<li class="f-nav-header">...</li>
<li class="f-nav-divider"></li>
Style modifiers
There are several modifiers to style the nav according to the context, in which it is used.
Nav side
Add the .f-nav-side
class to place a nav inside your sidebar, panels or anywhere else in your content.
Example
Nav side in panel
Markup
<div class="f-panel f-panel-box">
<h3 class="f-panel-title">...</h3>
<ul class="f-nav f-nav-side">...</ul>
</div>
Nav dropdown
Add the .f-nav-dropdown
class to place a nav inside a default dropdown from the Dropdown component.
Example
Markup
<div class="f-dropdown">
<ul class="f-nav f-nav-dropdown">...</ul>
</div>
Nav navbar
Add the .f-nav-navbar
class to place the nav inside a navbar dropdown from the Navbar component.
Example
Markup
<div class="f-dropdown f-dropdown-navbar">
<ul class="f-nav f-nav-navbar">...</ul>
</div>
Nav off-canvas
Add the .f-nav-offcanvas
class to place the nav inside an off-canvas sidebar from the Off-canvas component.
Example
Markup
<div class="f-offcanvas-bar">
<ul class="f-nav f-nav-offcanvas">...</ul>
</div>