--- name: menu-bar url: /menu-bar title: Menu Bar ---
Creating a basic menu bar is as easy as writing an unordered list with links.
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.
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
.
The menu bar can be recolored to be dark, or match your primary color.
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.
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.
Use the menu bar mixins to create this component with custom classes and settings.
Use these variables to change the core styles of the menu bar.