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.

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

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.

NOTE You can also add subtitles to nav items. Just create a <div> element inside the <a> element within the list item.

Example

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

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>