Updated: This page has been updated. See DESY-185 for details.

Side menu

The guideline content on this page is synced with Figma and can be used as a source of truth. Open in Figma

Side menu is a vertical, hierarchical navigation component that appears on the left side of a page or screen.

Anatomy

Navigation in its expanded state
Dropdown icon: only shown when there is more content in a sub-menu
Primary level expanded
Second level
Second level selected
Badge
Bottom content
Chevron to collapse and expand navigation
Navigation in its collapsible view

States

The top-level menu item supports the following states:

Enabled
Hover
Selected
Focused
Pressed

Example
HTML

development/documentation/docs/side-menu/examples/states.html

<div class="docs-state-frame">
	<div class="docs-state-number" aria-hidden="true">1</div>
	<div class="vertical-nav vertical-nav-icons">
		<ul class="nav" aria-expanded="true">
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
		</ul>
	</div>
</div>
<div class="docs-state-frame">
	<div class="docs-state-number" aria-hidden="true">2</div>
	<div class="vertical-nav vertical-nav-icons">
		<ul class="nav" aria-expanded="true">
			<li><a href="#!" class="hover"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
		</ul>
	</div>
</div>
<div class="docs-state-frame">
	<div class="docs-state-number" aria-hidden="true">3</div>
	<div class="vertical-nav vertical-nav-icons">
		<ul class="nav" aria-expanded="true">
			<li class="active"><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
		</ul>
	</div>
</div>
<div class="docs-state-frame">
	<div class="docs-state-number" aria-hidden="true">4</div>
	<div class="vertical-nav vertical-nav-icons">
		<ul class="nav" aria-expanded="true">
			<li><a href="#!" class="focus"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
		</ul>
	</div>
</div>
<div class="docs-state-frame">
	<div class="docs-state-number" aria-hidden="true">5</div>
	<div class="vertical-nav vertical-nav-icons">
		<ul class="nav" aria-expanded="true">
			<li><a href="#!" class="pressed"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
		</ul>
	</div>
</div>

Accessibility

Keyboard interaction

All components should be reachable via TAB and SHIFT+TAB keys.

Example
HTML

Menu item
Menu item
Menu item
Menu item
Menu item
Menu item

development/documentation/docs/side-menu/examples/accessibility.html

<div class="docs-state-frame">
	<div class="vertical-nav vertical-nav-icons">
		<ul class="nav" aria-expanded="true">
			<li><a href="#!" class="focus"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
			<li><a href="#!"><span class="spirisicon spirisicon-list" aria-hidden="true"></span> Menu item</a></li>
		</ul>
	</div>
</div>

Specs

Side menu specifications showing dimensions and spacing for expanded and collapsed variants

Developer reference

The following sections describe the supported markup and interactive variants. The vertical navigation requires JavaScript to make it interactive (collapsible levels, hide and show the navigation) — the snippets below include the inline script that powers the demonstrations.

Design

Collapsed view

The collapsed icon-only view is produced by pairing .vertical-nav-icons with .vertical-nav-collapse on the wrapper and adding .hidden-menu to render the menu in its 80 px collapsed state. The example below renders the menu in its collapsed view by default.

Example
HTML

development/documentation/docs/side-menu/examples/collapsed-view.html

<div class="page-holder page-holder-nav-collapse">
	<div class="vertical-nav vertical-nav-icons vertical-nav-collapse hidden-menu">
		<ul id="verticalNav-collapsed-view" class="nav" aria-expanded="false" aria-hidden="false">
			<li>
				<a href="#!" data-toggle="tooltip" data-placement="right" data-title="Inbox">
					<span class="spirisicon spirisicon-mail" aria-hidden="true"></span> Inbox <span class="badge">29</span>
				</a>
			</li>
			<li>
				<a href="#!" data-toggle="tooltip" data-placement="right" data-title="Draft">
					<span class="spirisicon spirisicon-file" aria-hidden="true"></span> Draft
				</a>
			</li>
			<li>
				<a href="#!" data-toggle="tooltip" data-placement="right" data-title="Sent">
					<span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Sent
				</a>
			</li>
			<li class="disabled">
				<a href="#!" tabindex="-1" aria-disabled="true" data-toggle="tooltip" data-placement="right" data-title="Starred">
					<span class="spirisicon spirisicon-star" aria-hidden="true"></span> Starred <span class="badge">3</span>
				</a>
			</li>
			<li>
				<a href="#!" data-toggle="tooltip" data-placement="right" data-title="Bin">
					<span class="spirisicon spirisicon-delete" aria-hidden="true"></span> Bin
				</a>
			</li>
			<li>
				<a href="#!" data-toggle="tooltip" data-placement="right" data-title="All mail">
					<span class="spirisicon spirisicon-mailbox" aria-hidden="true"></span> All mail <span class="badge">5</span>
				</a>
			</li>
			<li class="has-children">
				<a id="subMenuButton-collapsed-view" href="#!" aria-controls="subMenu-collapsed-view" aria-haspopup="true" aria-expanded="false">
					<span class="spirisicon spirisicon-receipt" aria-hidden="true"></span> Expenses <span class="badge">8</span>
				</a>
				<ul id="subMenu-collapsed-view" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for Expenses">
					<li>
						<a href="#!">Travel <span class="badge">3</span></a>
					</li>
					<li class="active">
						<a href="#!">Courses <span class="badge">5</span></a>
					</li>
					<li>
						<a href="#!">Car</a>
					</li>
				</ul>
			</li>
			<li class="bottom-content">
				<a href="#!" data-toggle="tooltip" data-placement="right" data-title="Help &amp; feedback">
					<span class="spirisicon spirisicon-help" aria-hidden="true"></span> Help &amp; feedback
				</a>
			</li>
			<li class="show-nav">
				<a href="#!" aria-controls="verticalNav-collapsed-view" aria-expanded="false" aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a>
			</li>
		</ul>
	</div>
</div>

Hide / show, no icons

To hide / close the navigation, apply the .hidden-menu class to the main vertical navigation wrapper (.vertical-nav) and, if necessary, the .hidden-vert-menu class (or your own functional class) to the page main content (.page-holder) so the layout responds to the new width.

Example
HTML

Inbox 2
Draft
Sent
Starred 3
Bin
All mail 5
Folders
Travel
Expenses
- Travel
- Courses
- Disabled link
- Car
Notes 17
Help & feedback
Show/Hide Menu

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis. Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.

Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.

development/documentation/docs/side-menu/examples/default-complete-collapse-no-icons.html

<div class="page-holder">
    <div class="vertical-nav">
        <ul id="verticalNav" class="nav" aria-expanded="true">
            <li>
                <a href="#!">Inbox <span class="badge">2</span></a>
            </li>
            <li>
                <a href="#!">Draft</a>
            </li>
            <li>
                <a href="#!">Sent</a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true">Starred <span class="badge">3</span></a>
            </li>
            <li>
                <a href="#!">Bin</a>
            </li>
            <li>
                <a href="#!">All mail <span class="badge">5</span></a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="label">Folders</li>
            <li>
                <a href="#!">Travel</a>
            </li>
            <li class="has-children active-child">
                <a id="subMenuButton" href="#!" aria-controls="subMenu" aria-haspopup="true" aria-expanded="false" >Expenses</a>
                <ul id="subMenu" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for Expenses">
                    <li>
                        <a href="#!">Travel</a>
                    </li>
                    <li class="active">
                        <a href="#!">Courses</a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Disabled link</a>
                    </li>
                    <li>
                        <a href="#!">Car</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!">Notes <span class="badge">17</span></a>
            </li>
            <li class="bottom-content">
                <a href="#!">Help &amp; feedback</a>
            </li>
            <li class="show-nav">
                <a href="#!" aria-controls="verticalNav" aria-expanded="true" aria-label="Toggle vertical menu complete collapse">Show/Hide Menu</a>
            </li>
        </ul>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis.
                Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.<br><br>
                Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
            </div>
        </div>
    </div>
</div>

Partial collapse, no icons

To contract / shrink the width instead of hiding the navigation list, add the .vertical-nav-collapse class to the wrapper. When the .hidden-menu class is applied, the menu contracts rather than disappears.

Example
HTML

Inbox 2
Draft
Sent
Starred 3
Bin
All mail 5
Folders
Travel
Expenses 8
- Travel 3
- Courses 5
- Disabled link
- Car
Notes 17
Help & feedback
Show/Hide Menu

development/documentation/docs/side-menu/examples/default-partial-collapse-no-icons.html

<div class="page-holder page-holder-nav-collapse">
    <div class="vertical-nav vertical-nav-collapse">
        <ul id="verticalNav-1" class="nav" aria-expanded="true">
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Inbox">Inbox <span class="badge">2</span></a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Draft">Draft</a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Sent">Sent</a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" data-toggle="tooltip" data-placement="right" data-title="Starred" aria-disabled="true">Starred <span class="badge">3</span></a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Bin">Bin</a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="All mail">All mail <span class="badge">5</span></a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="label">Folders</li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Travel">Travel</a>
            </li>
            <li class="has-children active-child">
                <a id="subMenuButton-1" href="#!" data-toggle="tooltip" data-placement="right" data-title="Expenses" aria-controls="subMenu-1" aria-haspopup="true" aria-expanded="false">Expenses <span class="badge">8</span></a>
                <ul id="subMenu-1" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for Expenses">
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Travel">Travel <span class="badge">3</span></a>
                    </li>
                    <li class="active">
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Courses">Courses <span class="badge">5</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Disabled link</a>
                    </li>
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Car">Car</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Notes">Notes <span class="badge">17</span></a>
            </li>
            <li class="bottom-content">
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Help">Help &amp; feedback</a>
            </li>
            <li class="show-nav">
                <a href="#!" aria-controls="verticalNav-1" aria-expanded="true" aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a>
            </li>
        </ul>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis.
                Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.<br><br>
                Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
            </div>
        </div>
    </div>
</div>

Hide / show, with icons

Add the .vertical-nav-icons class to the wrapper to render menu items with a leading icon.

Example
HTML

Inbox 29
Draft
Sent
Starred 3
Bin
All mail 5
Success
Error
Info
Help
Success
Folders
Travel
Notes 17
Expenses
- Travel
- Courses
- Disabled link
- Car
Informative icons
- Success
- Error
- Info
- Help
- Success
Show/Hide Menu

development/documentation/docs/side-menu/examples/default-complete-collapse-with-icons.html

<div class="page-holder">
    <div class="vertical-nav vertical-nav-icons">
        <ul id="verticalNav-2" class="nav" aria-expanded="true">
            <li>
                <a href="#!">
                    <span class="spirisicon spirisicon-mail" aria-hidden="true"></span> Inbox <span class="badge">29</span>
                </a>
            </li>
            <li>
                <a href="#!">
                    <span class="spirisicon spirisicon-file" aria-hidden="true"></span> Draft
                </a>
            </li>
            <li>
                <a href="#!">
                    <span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Sent
                </a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true">
                    <span class="spirisicon spirisicon-star" aria-hidden="true"></span> Starred <span class="badge">3</span>
                </a>
            </li>
            <li>
                <a href="#!">
                    <span class="spirisicon spirisicon-delete" aria-hidden="true"></span> Bin
                </a>
            </li>
            <li>
                <a href="#!">
                    <span class="spirisicon spirisicon-mailbox" aria-hidden="true"></span> All mail <span class="badge">5</span>
                </a>
            </li>
            <li>
                <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-success" aria-hidden="true"></span> Success</a>
            </li>
            <li>
                <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-error" aria-hidden="true"></span> Error</a>
            </li>
            <li>
                <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-info" aria-hidden="true"></span> Info</a>
            </li>
            <li>
                <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-help" aria-hidden="true"></span> Help</a>
            </li>
            <li class="disabled">
                <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-success" aria-hidden="true"></span> Success</a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="label">Folders</li>
            <li>
                <a href="#!">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Travel
                </a>
            </li>
            <li>
                <a href="#!">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Notes <span class="badge">17</span>
                </a>
            </li>

            <li class="has-children">
                <a id="subMenuButton-2" href="#!" aria-controls="subMenu-2" aria-haspopup="true" aria-expanded="false">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Expenses
                </a>
                <ul id="subMenu-2" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for Expenses">
                    <li class="has-icon">
                        <a href="#!"><span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Travel</a>
                    </li>
                    <li class="has-icon">
                        <a href="#!"><span class="spirisicon spirisicon-graduation-cap" aria-hidden="true"></span> Courses</a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Disabled link</a>
                    </li>
                    <li>
                        <a href="#!">Car</a>
                    </li>
                </ul>
            </li>
            <li class="has-children">
                <a id="subMenuButton-3" href="#!" aria-controls="subMenu-3" aria-haspopup="true" aria-expanded="false">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Informative icons
                </a>
                <ul id="subMenu-3" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for icons">
                    <li class="has-icon">
                        <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-success" aria-hidden="true"></span> Success</a>
                    </li>
                    <li class="has-icon">
                        <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-error" aria-hidden="true"></span> Error</a>
                    </li>
                    <li class="has-icon">
                        <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-info" aria-hidden="true"></span> Info</a>
                    </li>
                    <li class="has-icon">
                        <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-help" aria-hidden="true"></span> Help</a>
                    </li>
                    <li class="has-icon disabled">
                        <a href="#!"><span class="spirisicon spirisicon-filled spirisicon-success" aria-hidden="true"></span> Success</a>
                    </li>
                </ul>
            </li>
            <li class="show-nav">
                <a href="#!" aria-controls="verticalNav-2" aria-expanded="true" aria-label="Toggle vertical menu complete collapse">Show/Hide Menu</a>
            </li>
        </ul>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis.
                Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.<br><br>
                Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
            </div>
        </div>
    </div>
</div>

Partial collapse, with icons

Combine .vertical-nav-collapse with .vertical-nav-icons to render the icon-only collapsed strip alongside the contractible expanded view.

Example
HTML

Inbox 29
Draft
Sent
Starred 3
Bin
All mail 5
Folders
Travel
Notes 17
Expenses 3
- Travel
- Courses 3
- Disabled link
- Car
Show/Hide Menu

development/documentation/docs/side-menu/examples/default-partial-collapse-with-icons.html

<div class="page-holder page-holder-nav-collapse">
    <div class="vertical-nav vertical-nav-icons vertical-nav-collapse">
        <ul id="verticalNav-3" class="nav" aria-expanded="true">
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Inbox">
                    <span class="spirisicon spirisicon-mail" aria-hidden="true"></span> Inbox <span class="badge">29</span>
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Draft">
                    <span class="spirisicon spirisicon-file" aria-hidden="true"></span> Draft
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Sent">
                    <span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Sent
                </a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true" data-toggle="tooltip" data-placement="right" data-title="Starred">
                    <span class="spirisicon spirisicon-star" aria-hidden="true"></span> Starred <span class="badge">3</span>
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Bin">
                    <span class="spirisicon spirisicon-delete" aria-hidden="true"></span> Bin
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="All mail">
                    <span class="spirisicon spirisicon-mailbox" aria-hidden="true"></span> All mail <span class="badge">5</span>
                </a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="label">Folders</li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Travel">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Travel
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Notes">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Notes <span class="badge">17</span>
                </a>
            </li>
            <li class="has-children">
                <a id="subMenuButton-3" href="#!" data-toggle="tooltip" data-placement="right" data-title="Expenses" aria-controls="subMenu-3" aria-haspopup="true" aria-expanded="false">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Expenses <span class="badge">3</span>
                </a>
                <ul id="subMenu-3" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for Expenses">
                    <li class="has-icon">
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Travel"><span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Travel</a>
                    </li>
                    <li class="has-icon">
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Courses"><span class="spirisicon spirisicon-graduation-cap" aria-hidden="true"></span> Courses <span class="badge">3</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Disabled link</a>
                    </li>
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Car">Car</a>
                    </li>
                </ul>
            </li>
            <li class="show-nav">
                <a href="#!"aria-controls="verticalNav-3" aria-expanded="true" aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a>
            </li>
        </ul>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis.
                Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.<br><br>
                Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
            </div>
        </div>
    </div>
</div>

With variant badges

Add .badge or .badge-info / .badge-success / .badge-warning / .badge-danger elements inside the menu item link to render notification counts.

Example
HTML

Normal 2
Info 7
Success 5
Warning 8
Danger 1
Badges under dropdown
Expenses 8
- Normal 2
- Info 7
- Success 5
- Warning 8
- Danger 1
- Normal 3
- Info 9
- Success 2
- Warning 6
- Danger 4
Badges on disabled
Normal 3
Info 9
Success 2
Warning 6
Danger 4
Show/Hide Menu

development/documentation/docs/side-menu/examples/default-partial-collapse-with-variant-badges.html

<div class="page-holder page-holder-nav-collapse">
    <div class="vertical-nav vertical-nav-collapse">
        <ul id="verticalNav-1-badges" class="nav" aria-expanded="true">
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Normal badge">Normal <span class="badge">2</span></a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Info badge">Info <span class="badge badge-info">7</span></a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Success badge">Success <span class="badge badge-success">5</span></a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Warning badge">Warning <span class="badge badge-warning">8</span></a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Danger badge">Danger <span class="badge badge-danger">1</span></a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="label">Badges under dropdown</li>
            <li class="has-children active-child">
                <a id="subMenuButton-1-badges" href="#!" data-toggle="tooltip" data-placement="right" data-title="Expenses" aria-controls="subMenu-1-badges" aria-haspopup="true" aria-expanded="false">Expenses <span class="badge">8</span></a>
                <ul id="subMenu-1-badges" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for Expenses">
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Normal badge">Normal <span class="badge">2</span></a>
                    </li>
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Info badge">Info <span class="badge badge-info">7</span></a>
                    </li>
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Success badge">Success <span class="badge badge-success">5</span></a>
                    </li>
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Warning badge">Warning <span class="badge badge-warning">8</span></a>
                    </li>
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Danger badge">Danger <span class="badge badge-danger">1</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Normal <span class="badge">3</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Info <span class="badge badge-info">9</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Success <span class="badge badge-success">2</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Warning <span class="badge badge-warning">6</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Danger <span class="badge badge-danger">4</span></a>
                    </li>
                </ul>
            </li>
            <li class="divider" role="separator"></li>
            <li class="label">Badges on disabled</li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true">Normal <span class="badge">3</span></a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true">Info <span class="badge badge-info">9</span></a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true">Success <span class="badge badge-success">2</span></a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true">Warning <span class="badge badge-warning">6</span></a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true">Danger <span class="badge badge-danger">4</span></a>
            </li>
            <li class="show-nav">
                <a href="#!" aria-controls="verticalNav-1-badges" aria-expanded="true" aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a>
            </li>
        </ul>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis.
                Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.<br><br>
                Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
            </div>
        </div>
    </div>
</div>

Deprecated variants

The Figma source of truth ships a single white scheme. The blue (.vertical-nav-primary) and dark-grey (.vertical-nav-secondary) variants are kept here for backwards compatibility and will be removed in v3.0. New code should use the default .vertical-nav only.

Primary (blue)

Deprecated in v2.6

The .vertical-nav-primary (also .vertical-nav-blue / .vertical-nav-branded) modifier is deprecated and will be removed in v3.0. Drop the modifier — the redesigned default .vertical-nav already carries the purple-accent design.

Example
HTML

Inbox 29
Draft
Sent
Starred 3
Bin
All mail 5
Folders
Travel
Notes 17
Expenses 3
- Travel
- Courses 3
- Disabled link
- Car
Show/Hide Menu

development/documentation/docs/side-menu/examples/primary-partial-collapse-with-icons.html

<div class="page-holder page-holder-nav-collapse">
    <div class="vertical-nav vertical-nav-primary vertical-nav-icons vertical-nav-collapse">
        <ul id="verticalNav-7" class="nav" aria-expanded="true">
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Inbox">
                    <span class="spirisicon spirisicon-mail" aria-hidden="true"></span> Inbox <span class="badge">29</span>
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Draft">
                    <span class="spirisicon spirisicon-file" aria-hidden="true"></span> Draft
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Sent">
                    <span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Sent
                </a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true" data-toggle="tooltip" data-placement="right" data-title="Starred">
                    <span class="spirisicon spirisicon-star" aria-hidden="true"></span> Starred <span class="badge">3</span>
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Bin">
                    <span class="spirisicon spirisicon-delete" aria-hidden="true"></span> Bin
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="All mail">
                    <span class="spirisicon spirisicon-mailbox" aria-hidden="true"></span> All mail <span class="badge">5</span>
                </a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="label">Folders</li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Travel">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Travel
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Notes">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Notes <span class="badge">17</span>
                </a>
            </li>
            <li class="has-children">
                <a id="subMenuButton-7" href="#!" data-toggle="tooltip" data-placement="right" data-title="Expenses" aria-controls="subMenu-7" aria-haspopup="true" aria-expanded="false">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Expenses <span class="badge">3</span>
                </a>
                <ul id="subMenu-7" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for Expenses">
                    <li class="has-icon">
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Travel"><span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Travel</a>
                    </li>
                    <li class="has-icon">
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Courses"><span class="spirisicon spirisicon-graduation-cap" aria-hidden="true"></span> Courses <span class="badge">3</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Disabled link</a>
                    </li>
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Car">Car</a>
                    </li>
                </ul>
            </li>
            <li class="show-nav">
                <a href="#!" aria-controls="verticalNav-7" aria-expanded="true" aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a>
            </li>
        </ul>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis.
                Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.<br><br>
                Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
            </div>
        </div>
    </div>
</div>

Secondary (dark grey)

Deprecated in v2.6

The .vertical-nav-secondary (also .vertical-nav-inverted) modifier is deprecated and will be removed in v3.0. Drop the modifier and use the default .vertical-nav. Apps that require an inverse (dark) surface should switch to the dark-mode CSS bundle instead.

Example
HTML

Inbox 29
Draft
Sent
Starred 3
Bin
All mail 5
Folders
Travel
Notes 17
Expenses 3
- Travel
- Courses 3
- Disabled link
- Car
Show/Hide Menu

development/documentation/docs/side-menu/examples/secondary-partial-collapse-with-icons.html

<div class="page-holder page-holder-nav-collapse">
    <div class="vertical-nav vertical-nav-secondary vertical-nav-icons vertical-nav-collapse">
        <ul id="verticalNav-11" class="nav" aria-expanded="true">
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Inbox">
                    <span class="spirisicon spirisicon-mail" aria-hidden="true"></span> Inbox <span class="badge">29</span>
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Draft">
                    <span class="spirisicon spirisicon-file" aria-hidden="true"></span> Draft
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Sent">
                    <span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Sent
                </a>
            </li>
            <li class="disabled">
                <a href="#!" tabindex="-1" aria-disabled="true" data-toggle="tooltip" data-placement="right" data-title="Starred">
                    <span class="spirisicon spirisicon-star" aria-hidden="true"></span> Starred <span class="badge">3</span>
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Bin">
                    <span class="spirisicon spirisicon-delete" aria-hidden="true"></span> Bin
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="All mail">
                    <span class="spirisicon spirisicon-mailbox" aria-hidden="true"></span> All mail <span class="badge">5</span>
                </a>
            </li>
            <li class="divider" role="separator"></li>
            <li class="label">Folders</li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Travel">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Travel
                </a>
            </li>
            <li>
                <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Notes">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Notes <span class="badge">17</span>
                </a>
            </li>
            <li class="has-children">
                <a id="subMenuButton-11" href="#!" data-toggle="tooltip" data-placement="right" data-title="Expenses" aria-controls="subMenu-11" aria-haspopup="true" aria-expanded="false">
                    <span class="spirisicon spirisicon-chevron-right" aria-hidden="true"></span> Expenses <span class="badge">3</span>
                </a>
                <ul id="subMenu-11" class="nav" role="menu" aria-expanded="false" aria-hidden="true" aria-label="Submenu options for Expenses">
                    <li class="has-icon">
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Travel"><span class="spirisicon spirisicon-plane" aria-hidden="true"></span> Travel</a>
                    </li>
                    <li class="has-icon">
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Courses"><span class="spirisicon spirisicon-graduation-cap" aria-hidden="true"></span> Courses <span class="badge">3</span></a>
                    </li>
                    <li class="disabled">
                        <a href="#!" tabindex="-1" aria-disabled="true">Disabled link</a>
                    </li>
                    <li>
                        <a href="#!" data-toggle="tooltip" data-placement="right" data-title="Car">Car</a>
                    </li>
                </ul>
            </li>
            <li class="show-nav">
                <a href="#!" aria-controls="verticalNav-11" aria-expanded="true" aria-label="Toggle vertical menu partial collapse">Show/Hide Menu</a>
            </li>
        </ul>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-12">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat nibh, convallis at leo a, congue feugiat nulla. Maecenas efficitur gravida nisl, nec ultrices elit ornare quis.
                Sed ac quam at lectus varius molestie vitae sit amet est. Fusce lorem mauris, condimentum ac sagittis quis, laoreet quis tortor. Nam eu ante lobortis nibh scelerisque iaculis ut a nunc. Pellentesque at sodales metus, dictum pellentesque mi.<br><br>
                Pellentesque a nibh nec risus posuere ultrices in sit amet eros. Donec pulvinar ipsum orci, a imperdiet mi facilisis id. Nunc mattis, ligula vitae facilisis facilisis, libero turpis fermentum metus, in maximus sapien velit in enim. Proin dapibus posuere consectetur. Nunc vitae libero vitae purus tempor us a ut orci.
            </div>
        </div>
    </div>
</div>