Navs

it is a base navigation which is use to navigate.

Example #

it is built with flexbox.

<nav className="n-nav">
    <a className="n-nav-link active" href="#">Active</a>
    <a className="n-nav-link" href="#">Link</a>
    <a className="n-nav-link" href="#">Link</a>
    <a className="n-nav-link disabled" href="#">(Disabled)</a>
</nav>

Flat Shadow #

by adding .n-nav-flat class it will appear in flat top style.

<nav className="n-nav n-nav-flat">
    <a className="n-nav-link active" href="#">Active</a>
    <a className="n-nav-link" href="#">Link</a>
    <a className="n-nav-link" href="#">Link</a>
    <a className="n-nav-link disabled" href="#">(Disabled)</a>
</nav>

No Hover #

by addding .n-no-hover class it will avoid to appear pressed when hovering.

<nav className="n-nav n-no-hover">
    <a className="n-nav-link active" href="#">Active</a>
    <a className="n-nav-link" href="#">Link</a>
    <a className="n-nav-link" href="#">Link</a>
    <a className="n-nav-link disabled" href="#">(Disabled)</a>
</nav>

Column Style Nav #

by addding .n-nav-column class it will appear in column style.

<nav className="n-nav n-nav-column">
    <a className="n-nav-link active" href="#">Active</a>
    <a className="n-nav-link" href="#">Link</a>
    <a className="n-nav-link" href="#">Link</a>
    <a className="n-nav-link disabled" href="#">(Disabled)</a>
</nav>

DARK THEME

Navs

Warning!