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 */ });