Navigation

Creates a component that automatically moves menu items that don't fit into a dropdown item with button to toggle. Resize your window to see the examples in action.

Usage

Standard responsive behaviour, just add a data-f-navigation attribute to your navbar and a class of f-navigation.

Example

Markup

<nav class="f-navbar f-navigation" data-f-navigation>
	<ul class="f-navbar-nav">
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
	<ul>
<nav>

Show a Counter

To show a counter on the number of hidden items add the `counter` option.

Example

Markup

<nav class="f-navbar f-navigation" data-f-navigation="{ counter: true }">
	<ul class="f-navbar-nav">
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
	<ul>
<nav>

Animation Modifiers

You can use any of the classes from the animation component to change the way the hidden menu shows and hides. Set animation:'f-animation-*' and, optionally a separate animation for hiding the menu with animation_out : 'f-animation-*'. (Note, the animation out reverses the animation automatically.)

Example

Markup

<nav class="f-navbar f-navigation" data-f-navigation="{ animation : 'f-animation-scale-up-over', animation_out : 'f-animation-shake' }">
	<ul class="f-navbar-nav">
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
	<ul>
<nav>

More Complex Navbars

The component should handle most of the navbar layouts available. Currently it only supports one navigation list collapsing though. As an example you can add the brand in:

Example

Markup

<nav class="f-navbar f-navigation" data-f-navigation>
	<a class="f-navbar-brand" href="#">Brand</a>
	<ul class="f-navbar-nav">
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
	<ul>
<nav>

Or you could even add search and an extra link in with dropdowns:

Markup

<nav class="f-navbar f-navigation" data-f-navigation>
	<a class="f-navbar-brand" href="#">Brand</a>
	<div class="f-navbar-content">Some <a href="#">link</a>.</div>
	<ul class="f-navbar-nav">
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
		<li><a href="">...</a></li>
	<ul>
<nav>

Inside a Grid

The component checks the width of it's container to see whether it needs to collapse links. This means that you can put the navbar anywhere and it will only show what will fit in the space.

Example


JavaScript options

Option Possible value Default Description
animation string f-animation-slide-right The animation used to show the dropdown (see animations for options)
animation_out string f-animation-slide-right (in reverse) Animation used to hide the dropdown
counter boolean false Show an indicator on the number of hidden items
parent string Selector used to define a different parent
toggle_icon_class string f-navigation-menu-toggle Extra class applied to toggle item to style it
toggle_icon_content string <i class="material-icons">more_vert</i> The toggle element's HTML
debug boolean false enables debugging via console logs
dropdown_icon_width integer 24 required to help calculate the correct navigation width

Init element manually


	let navigation = FatKit.navigation(element, { /* options */ });