Preview

Menu

Usage

<div class="menu-inner menu-inner-vertical">
    <ul>
        <li>
            <a href="#">
                <i class="im-calendar-4"></i>
                Item 1
            </a>
        </li>
        <li class="dropdown">
            <a href="#">
                <i class="im-gear-2"></i>
                Item 2
            </a>
            <ul>
                <li><a href="#">item 2.1</a></li>
                <li><a href="#">item 2.2</a></li>
                <li><a href="#">item 2.3</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="menu-inner menu-inner-vertical menu-inner-image">
    <ul>
        <li>
            <a href="#">
                <img src="image.jpg" />
                <span>Additional text</span>
                Item 1
            </a>
        </li>
        <li>
            <a href="#">
                <img src="image.jpg" />
                <span>Additional text</span>
                Item 2
            </a>
        </li>
        <li>
            <a href="#">
                <img src="image.jpg" />
                <span>Additional text</span>
                Item 3
            </a>
        </li>
        <li>
            <a href="#">
                <img src="image.jpg" />
                <span>Additional text</span>
                Item 4
            </a>
        </li>
    </ul>
</div>

<div class="menu-inner">
    <div><i class="menu-btn"></i><span>Menu</span></div>
    <ul>
        <li><a href="#"><i class="im-home"></i>Item 1</a></li>
        <li class="dropdown">
            <a href=""><i class="im-speach-bubble2"></i>Item 2</a>
            <ul>
                <li><a href="#">Item 2.1</a></li>
                <li class="dropdown-submenu">
                    <a href="#">Item 2.2</a>
                    <ul>
                        <li><a href="#">Item 2.2.1</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#"><i class="im-calendar-4"></i>Item 3</a></li>
        <li><a href="#"><i class="im-gear-2"></i>Item 4</a></li>
    </ul>
</div>

<div class="menu-inner menu-inner-vertical" data-scroll-detect="true">
    <ul>
        <li>
            <a href="#usage">
                Usage
            </a>
        </li>
        <li>
            <a href="#settings">
                Settings
            </a>
        </li>
        <li>
            <a href="#related">
                Related
            </a>
        </li>
    </ul>
</div>

Settings

Name Type Description
Icons lists CSS Font Awesome Icons Mind
Scroll detect Attribute Add the attribute data-scroll-detect="true" to the component and link each menu item to the #IDs of the targets.
Alignment CSS Add the class nav-right to the component to align the menu items on right and the class nav-center to align the menu items on center.
Try it Center alignment Right alignment
Fixed area Information For more details about fixing a menu on the screen and make it always visible, also on page scroll, visit the fixed area page.
Icons
Fixed area