Vertical Menu

The Vertical Menu (v-menu) component provides a vertical navigation menu with support for dropdown items, icons, hotkeys, and dividers.

Dependencies

This component has no JavaScript dependencies as it’s a CSS-only component.

Usage

<ul class="v-menu">
    <li class="menu-title">Menu Title</li>
    <li>
        <a href="#">
            <span class="icon mif-home"></span>
            <span class="caption">Home</span>
            <span class="hotkey">Ctrl+H</span>
        </a>
    </li>
    <li class="divider"></li>
    <li>
        <a href="#" class="dropdown-toggle">
            <span class="icon mif-cog"></span>
            <span class="caption">Settings</span>
        </a>
        <ul>
            <li><a href="#">General</a></li>
            <li><a href="#">Security</a></li>
            <li><a href="#">Privacy</a></li>
        </ul>
    </li>
    <li class="disabled">
        <a href="#">
            <span class="icon mif-user"></span>
            <span class="caption">Profile (Disabled)</span>
        </a>
    </li>
</ul>

Features

Menu Items

Basic menu items consist of an optional icon, caption, and optional hotkey:

<li>
    <a href="#">
        <span class="icon mif-home"></span>
        <span class="caption">Home</span>
        <span class="hotkey">Ctrl+H</span>
    </a>
</li>

Section Titles

Add section titles to organize your menu:

<li class="menu-title">Section Title</li>

Dividers

Add dividers to separate menu items:

<li class="divider"></li>

Dropdown Menus

Create nested dropdown menus:

<li>
    <a href="#" class="dropdown-toggle">
        <span class="icon mif-cog"></span>
        <span class="caption">Settings</span>
    </a>
    <ul>
        <li><a href="#">General</a></li>
        <li><a href="#">Security</a></li>
        <li><a href="#">Privacy</a></li>
    </ul>
</li>

Disabled Items

Disable menu items:

<li class="disabled">
    <a href="#">
        <span class="icon mif-user"></span>
        <span class="caption">Profile (Disabled)</span>
    </a>
</li>

Right Alignment

Align the menu to the right:

<ul class="v-menu place-right">
    <!-- Menu items -->
</ul>

Styling with CSS Variables

The Vertical Menu component can be customized using CSS variables:

CSS Variable	Default Value (Light)	Default Value (Dark)	Description
--v-menu-border-color	#e9e9e9	#404959	Border color of the menu
--v-menu-divider-color	#e9e9e9	#404959	Color of menu dividers
--v-menu-background	#ffffff	#11151d	Background color of the menu
--v-menu-color	#191919	#ffffff	Text color of the menu
--v-menu-item-color	#191919	#dbdfe7	Text color of menu items
--v-menu-item-color-disabled	#ccc	#173e8f	Text color of disabled menu items
--v-menu-item-color-hover	#000000	#ffffff	Text color of menu items on hover
--v-menu-item-background-hover	#e8e8e8	#222938	Background color of menu items on hover
--v-menu-dropdown-toogle-color	#191919	#ffffff	Color of dropdown toggle indicators
--v-menu-shadow-color	#e1e1e1	#191919	Shadow color of the menu
--v-menu-border-radius	4px	4px	Border radius of menu items

Dark Mode

The component automatically adapts to dark mode when the .dark-side class is applied to a parent element:

<div class="dark-side">
    <ul class="v-menu">
        <!-- Menu items -->
    </ul>
</div>

Example with Custom Styling

<style>
    .custom-v-menu {
        --v-menu-border-color: #3b5998;
        --v-menu-divider-color: #8b9dc3;
        --v-menu-background: #f7f7f7;
        --v-menu-color: #333333;
        --v-menu-item-color: #333333;
        --v-menu-item-color-disabled: #999999;
        --v-menu-item-color-hover: #ffffff;
        --v-menu-item-background-hover: #3b5998;
        --v-menu-dropdown-toogle-color: #3b5998;
        --v-menu-shadow-color: rgba(59, 89, 152, 0.2);
        --v-menu-border-radius: 6px;
    }
</style>

<ul class="v-menu custom-v-menu">
    <li class="menu-title">Application</li>
    <li>
        <a href="#">
            <span class="icon mif-home"></span>
            <span class="caption">Dashboard</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span class="icon mif-file-text"></span>
            <span class="caption">Documents</span>
            <span class="hotkey">Ctrl+D</span>
        </a>
    </li>
    <li class="divider"></li>
    <li>
        <a href="#" class="dropdown-toggle">
            <span class="icon mif-cog"></span>
            <span class="caption">Settings</span>
        </a>
        <ul>
            <li><a href="#">Account</a></li>
            <li><a href="#">Preferences</a></li>
            <li><a href="#">Security</a></li>
        </ul>
    </li>
    <li class="disabled">
        <a href="#">
            <span class="icon mif-bell"></span>
            <span class="caption">Notifications</span>
        </a>
    </li>
</ul>

This example creates a vertical menu with custom styling for an application navigation.

Note

There appears to be a potential issue in the component’s CSS where some variables are using --d-menu-* instead of --v-menu-*. The documentation above uses the correct --v-menu-* variables as defined in the component’s CSS.