--- name: menu-bar url: /menu-bar title: Menu Bar ---

Menu Bar

Our menu bar gives you the ability to switch between different subtasks, views, or modes in an app. It can be used vertically or horizontally.



Basic HTML

Creating a basic menu bar is as easy as writing an unordered list with links.


Advanced HTML

Orientation

By default, menu bars are horizontal, but they can also be vertically oriented by adding the `vertical` class.

The orientation classes also come in responsive flavors, allowing a menu bar to change orientation on different screen sizes. For example, the below menu will start out vertical on small screens and shift to horizontal on medium-sized screens and up.

Spacing

The items of the menu bar automatically space out evenly. The items can also be condensed on the left instead of spread out, by adding the `condense` class to the menu bar container.

Using responsive classes, a menu bar can switch between being expanded and being condensed at different screen sizes. Use the classes medium-condense, large-condense, medium-expand, and large-expand.

Coloring

The menu bar can be recolored to be dark, or match your primary color.


Icons

The menu bar supports icons, which can be positioned above, below, to the left, or to the right of the text. Icons can also be used standalone—just drop the image into the <a> by itself.


By default, the icon is positioned above the text. However, this can be changed by adding the classes icon-left, icon-right, or icon-bottom to the menu bar container.



These classes can also be used responsively! In the below code example, the menu bar's icons are top-aligned on small screens, and left-aligned on large screens.


Menu Group

Use the menu-group component to wrap two menu bars in a container, which will pin one to the left and one to the right.


Sass Mixins

Use the menu bar mixins to create this component with custom classes and settings.

.custom-menu-bar { // This placeholder selector gets you the core structural styles for the menu @extend %menu-bar; // Set the orientation and sizing of the menu bar @include menu-bar-layout( $orientation: horizontal, // Can be horizontal or vertical $stretch: true // Set to false for a condensed menu ); // Add styles for the menu bar items and text @include menu-bar-style( $background: #000, // Background color of items $background-hover: #333, // Background color of item on hover $background-active: #666, // Background color of an active item $color: #fff, // Text color of items $color-hover, // Text color of item on hover $color-active, // Text color of item when active $autocolor: false // When true, all the above colors will be derived from $background ); // Add support for icons @include menu-bar-icons( $position: left, // Can be top, right, bottom, or left $size: 20px // Can be px, em, or rem ); }

Sass Variables

Use these variables to change the core styles of the menu bar.