Navbar | siimple css

Navbar

A horizontally navigation component

To create a basic navbar, the first thing to do is to create a div with the class siimple-navbar. You should give it a title: add inside a div and apply the class siimple-navbar-title to it. This will be the result:

<div class="siimple-navbar">
    <div class="siimple-navbar-title">Title</div>
</div>

A navbar can contain two groups: one on the right and one on the left. This is great to separate the title of your app from the navigation links. You can create the right group inside your navbar by adding a div with the class siimple--float-right (see float helpers section). Let's add two navbar items to the right side of the navbar using the class siimple-navbar-item and see how it looks:

<div class="siimple-navbar">
    <a class="siimple-navbar-title">Title</a>
    <div class="siimple--float-right">
        <a class="siimple-navbar-item">Link 1</a>
        <a class="siimple-navbar-item">Link 2</a>
    </div>
</div>

It looks good! You can use the navbar items to add links to sections of your website.

Use siimple-navbar-item instead of siimple-navbar-link, that is still supported but will be removed in a future major release.

Subtitle

Added in v3.1.0

You can add a subtitle inside the navbar by adding a new DOM element with the siimple-navbar-subtitle class.

<div class="siimple-navbar">
    <a class="siimple-navbar-title">Title</a>
    <div class="siimple-navbar-subtitle">Subtitle</div>
    <div class="siimple--float-right">
        <a class="siimple-navbar-item">Link 1</a>
        <a class="siimple-navbar-item">Link 2</a>
    </div>
</div>

Sizing

Change the navbar size adding a siimple-navbar--[SIZE] class to the navbar parent element, where [SIZE] is one of the valid layout sizes.

<div class="siimple-navbar siimple-navbar--fluid">
    <a class="siimple-navbar-title">Title</a>
    <a class="siimple-navbar-subtitle">Subtitle</a>
    <div class="siimple--float-right">
        <a class="siimple-navbar-item">Item</a>
    </div>
</div>

Coloring

You can set the navbar color adding a siimple-navbar--[COLOR] class to the navbar parent element. Check the available colors list in the theming section.

<div class="siimple-navbar siimple-navbar--primary siimple-navbar--fluid">
    <a class="siimple-navbar-title">Title</a>
    <a class="siimple-navbar-subtitle">Subtitle</a>
    <div class="siimple--float-right">
        <a class="siimple-navbar-item">Item</a>
    </div>
</div>

Legacy colors API for the navbar component are still supported, but will be removed in a future major release of siimple. Upgrade to the new colors API introduced in v3.1.0.

<div class="siimple-navbar siimple-navbar--orange siimple-navbar--fluid">
    <a class="siimple-navbar-title">Title</a>
    <a class="siimple-navbar-subtitle">Subtitle</a>
    <div class="siimple--float-right">
        <a class="siimple-navbar-item">Item</a>
    </div>
</div>

Found a mistake or want to help improve this documentation? Suggest changes.