Pod Point UI Toolkit

Navbar

Required files

SCSS files required: _components.navbar.scss

SCSS files optional: _components.dropdown.scss

The markup

<nav class="navbar">
    <div class="container clearfix">
        <a class="navbar__brand float-left-md" href="/">Brand</a>

        <ul class="nav navbar__nav float-right-md">
            <li class="nav__item dropdown">
                <button id="toggle-user-dropdown-menu" class="nav__link" data-toggle-el="user-dropdown-menu">
                    Dropdown
                </button>

                <ul data-js-module="toggleElement" class="nav dropdown-menu toggle" id="user-dropdown-menu">
                    <li class="nav__item"><a class="nav__link" href="#">Item 1</a></li>
                    <li class="nav__item"><a class="nav__link" href="#">Item 2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Navbar with dropdown

<nav class="navbar">
    <div class="container clearfix">
        <a class="navbar__brand float-left-md" href="/">Brand</a>

        <ul class="nav navbar__nav float-right-md">
            <li class="nav__item dropdown">
                <button id="toggle-user-dropdown-menu" class="nav__link" data-toggle-el="user-dropdown-menu">
                    Dropdown
                </button>

                <ul data-js-module="toggleElement" class="nav dropdown-menu toggle" id="user-dropdown-menu">
                    <li class="nav__item"><a class="nav__link" href="#">Item 1</a></li>
                    <li class="nav__item"><a class="nav__link" href="#">Item 2</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>