Menusdemo

Dropdown Menu

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown javascript plugin.

You can change color of the navigation bar. To set predefined color for navigation bar you can use bg-color-* classes.

<div class="nav-bar bg-color-darken">...</div>
<div class="nav-bar bg-color-green">...</div>
<div class="nav-bar bg-color-pink">...</div>

For additional colors see this page.

Component definition

    <div class="nav-bar">
        <div class="nav-bar-inner">

            <span class="element">Product Name</span>

            <span class="divider"></span>

            <ul class="menu">
                <li data-role="dropdown">
                    <a href="#">Item 1</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">SubItem</a></li>
                        ...
                        <li><a href="#">SubItem</a></li>
                    </ul>
                </li>
                <li><a /></li>
                <li class="divider"></li>
                <li><a /></li>
            </ul>
        </div>
    </div>

For dropdown you must include in head dropdown.js