Scroll to Top

Navbar

Material Grammi provides variety of customize-able navbar and with the various themes. Use links, search, and various components with navbar. It is responsive and extensible.

SITEMAP Documentation / Components / Navbar

Demo

use attributes to control the responsive state of elements. attributes: (toggle-button, toggle-target).

Code copy

<div class="navbar navbar-default marginY-20" toggle-button=".navbar-example-1-open" toggle-target=".navbar-example-1-target">
                <a class="brand-name active padX-10 padR-30">Brand</a>
                <div class="navbar-example-1-target">
                    <a class="padR-10">Home</a>
                    <a class="padR-10">About</a>
                    <a class="padR-10">Contact</a>
                </div>
                    
                <a href="#" class="navbar-example-1-open padX-10 padY-5 shadow-dark-1 right-on-s"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>

            </div>

You can choose pre-defined looks of navbar from these classes as well as define your own classes to make a new look for navbar.

Use "navbar-default" class to style the default navbar.

Code copy

<div class="navbar navbar-default marginY-20" toggle-button=".navbar-example-2-open" toggle-target=".navbar-example-2-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-2-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a href="#" class="navbar-example-2-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Use "navbar-primary" class to style the blue navbar.

Code copy

<div class="navbar navbar-primary marginY-20" toggle-button=".navbar-example-3-open" toggle-target=".navbar-example-3-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-3-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a href="#" class="navbar-example-3-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Use "navbar-success" class to style the green navbar.

Code copy

<div class="navbar navbar-success marginY-20" toggle-button=".navbar-example-4-open" toggle-target=".navbar-example-4-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-4-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a class="navbar-example-4-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Use "navbar-warning" class to style the amber navbar.

Code copy

<div class="navbar navbar-warning marginY-20" toggle-button=".navbar-example-5-open" toggle-target=".navbar-example-5-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-5-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a class="navbar-example-5-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Use "navbar-danger" class to style the red navbar.

Code copy

<div class="navbar navbar-danger marginY-20" toggle-button=".navbar-example-6-open" toggle-target=".navbar-example-6-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-6-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a class="navbar-example-6-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Use "navbar-special" class to style the teal navbar.

Code copy

<div class="navbar navbar-special marginY-20" toggle-button=".navbar-example-7-open" toggle-target=".navbar-example-7-target">
                <div class="row">
                    <div class="col m2 l2 s12">
                        <a class="brand-name active padL-10">Brand</a>
                    </div>
                    <div class="col m4 l4 s12">
                        <div class="navbar-example-7-target">
                            <a class="padR-15">Home</a>
                            <a class="padR-15">About</a>
                            <a class="padR-15">Contact</a>
                        </div>
                    </div>
                    <div class="col s12 text-right">
                        <div class="marginR-30-on-s">
                            <a class="navbar-example-7-open padX-10 padY-5 shadow-dark-1 btn-dark"><i class="fa fa-angle-double-down" aria-hidden="true"></i></a>
                        </div>

                    </div>
                </div>
            </div>

Feedback