Nav

Use the .nav style to control groups of links, including navigation, menus, breadcrumbs, pagination, and segmented controls.

Basic Nav

Use the .nav class to stack groups of links.

{% highlight html %} {% endhighlight %}

Basic Theme

Use the .nav-dark or .nav-light thematic extensions to change the look and feel.

{% highlight html %} {% endhighlight %}

Table Nav

Use the .nav-table extension to set links inline on desktop.

{% highlight html %} {% endhighlight %}

Mobile Table Nav

Use the .mobile-nav-table extension to set links inline at all screen sizes.

{% highlight html %} {% endhighlight %}

Fixed Table Nav

Use the .nav-table-fixed extension to make all links equal width.

{% highlight html %} {% endhighlight %}

Nav Sizes

Use the .nav-big or .nav-small extensions to change size.

{% highlight html %} {% endhighlight %}
{% highlight html %} {% endhighlight %}

Nav Flush

Use the .nav-flush extension to align nav with surrounding content.

Nav Flush

{% highlight html %}

Nav Flush

{% endhighlight %}

Nav Items

Use the .nav-item class to include non link elements. Optionally, add the .nav-item-px class to give the item padding on the x-axis.

{% highlight html %} {% endhighlight %}

Pills

Use the .nav-pills thematic extension to create a pill style nav. Use the .active class for the currently selected item.

{% highlight html %} {% endhighlight %}

Tabs

Use the .nav-tabs thematic extension to create a tab style nav.

{% highlight html %} {% endhighlight %}

Segmented Control

Use the .nav-segments thematic extension to create segmented controls.

{% highlight html %} {% endhighlight %}

Bordered Nav

Use the .nav-borders thematic extension on a stacked nav for a bordered menu treatment.

{% highlight html %} {% endhighlight %}

Pagination and Breadcrumbs

Using any of the nav styles for things like pagination and breadcrumbs.

{% highlight html %} {% endhighlight %}
{% highlight html %} {% endhighlight %}