Codebase 3.0.1
Main Menu  

Menus

Codebase .menu classes set up a simple stacked menu. Adding .flexbox layout classes to menus enables a simple menubar or even a responsive menubar layout.

On this page:

Note: If you are looking for a more complex navigation system, see the Codebase megamenu.

The Simplest Menu

Example:

<ul class="menu">
  <li class="menu-item"><a href="#/">Link 1</a></li>
  <li class="menu-item"><a href="#/">Link 2</a></li>
  <li class="menu-item"><a href="#/">Link 3</a></li>
  <li class="menu-item"><a href="#/">Link 4</a></li>
  <li class="menu-item"><a href="#/">Link 5</a></li>
</ul>

.menu and .menu-item have zero margins and paddings (e.g. they reset an ordered or unordered list).

<a> hyperlinks inside .menu-item are rendered as block elements and they are given some padding.

You are free to choose how to distinguish child menus from their parents any way you want. E.g. add some padding to inset the child menu, or give it a border or a different background color. (See utilities.)

Example using .pl-2e to inset sub-menus:

Simple menubars (i.e. horizontal navigation lists) can be built by adding flexbox to menus.

<ul class="menu flexbox">
  <li class="menu-item"><a href="#/">Link 1</a></li>
  <li class="menu-item"><a href="#/">Link 2</a></li>
  <li class="menu-item"><a href="#/">Link 3</a></li>
  <li class="menu-item"><a href="#/">Link 4</a></li>
  <li class="menu-item"><a href="#/">Link 5</a></li>
</ul>
Note: You can’t have sub-menus in simple flexbox menubars. If you need something more complex, see the Codebase megamenu.

Menu-item positioning in menubars (borders added to aid visualization):

.menu.flexbox.flexbox-left

.menu.flexbox.flexbox-right

.menu.flexbox.flexbox-center

.menu.flexbox.flexbox-space-between

Responsive Menubars

There may be situations where you require a navigation list to display as a stacked menu on small viewports but as a menubar on wider viewports. You can also accomplish that using responsive flexbox classes.

Example using .menu.flexbox-md.flexbox-md-center:

The example above will switch from from a menu to a menubar at the Codebase md viewport width (768px).

Class Notes
.menu The menu component wrapper
.menu-item The menu item element
.menu a The menu link element (block)

See also flexbox for use in setting up menubars.

Badges and Labels
Megamenus
Width: [-sm][-md → -lg][-lg]