Subnav

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
.f-tab Add this class to an <ul> element and nest <a> elements within the list.
.f-active Add this class to a list item to apply an active state.
.f-disabled Add this class to a list item to apply a disabled state.

Example

Markup

<ul class="f-subnav">
	<li class="f-active"><a href="">...</a></li>
	<li><a href="">...</a></li>
	<li class="f-disabled"><a href="">...</a></li>
</ul>

Modifiers

Subnav line

Add the .f-subnav-line class to separate menu items with lines.

Example

Markup

<ul class="f-subnav f-subnav-line">
	<li>...</li>
</ul>

Subnav pill

Add the .f-subnav-pill class to highlight the active menu item with a background. To apply an active state to a menu item, just add the .f-active class.

Example

Markup

<ul class="f-subnav f-subnav-pill">
	<li class="f-active">...</li>
</ul>

This is an example of how to use a subnav with the Dropdown component.

Example

Markup

<ul class="f-subnav">
	<li><a href="">...</a></li>

	<!-- This is the container enabling the JavaScript -->
	<li data-f-dropdown="{mode:'click'}">

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

		<!-- This is the dropdown -->
		<div class="f-dropdown f-dropdown-small">
			<ul class="f-nav f-nav-dropdown">
				<li><a href="">...</a></li>
			</ul>
		</div>
	</li>
</ul>