---
name: menu-bar
url: /menu-bar
title: Menu Bar
---
Menu Bar
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 `condensed` class to the menu bar container.
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.
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.
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-hover: #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.
$menubar-fontsize: 1rem !default;
$menubar-background: #fff !default;
$menubar-background-hover: smartscale($menubar-background, 7%) !default;
$menubar-background-active: $menubar-background-hover;
$menubar-color: isitlight($menubar-background) !default;
$menubar-color-hover: $menubar-color !default;
$menubar-color-active: $menubar-color-hover;
$menubar-item-padding: $global-padding !default;
$menubar-icon-size: 25px !default;
$menubar-icon-spacing: $menubar-item-padding !default;