Codebase

Documentation

Responsive Layouts
Utilities
Components
Simple Components

Menus (and Menubars)

.menu is usually used on an ul or ol. Its styles will be applied to immediate children by > * (usually <li>) and immediate grandchildren by > * > * (i.e. usually <a>).

<ul class="menu">
  <li><a href="">Item 1</a></li>
  <li><a href="">Item 2</a></li>
  <li><a href="">Item 3</a></li>
  <li><a href="">Item 4</a></li>
  <li><a href="">Item 5</a></li>
</ul>

How to indicate a sub menu? Codebase leaves the choice entirely up to you. You may inset a sub menu using margin or padding, or by a colored border, and/or distinguish it by adding a background color. Example using the spacing utility class mb-3 (that supplies margin-left: 1.5rem):

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

Note: menus have no bottom margin – because a bottom margin causes gaps that you don’t want when you have sub-menus (a.k.a. child menus), and it messes with your layout when you are making a menubar. But if you do need some bottom margin or padding, you can easily add these using spacing utility classes.

Codebase menus have side padding by default. But there are some places (e.g. footers and sidebars) where you may not want menu items to have side padding.

We’ve got you covered. Simply add the .menu-flush modifier class.

.menu

.menu.menu-flush

Combine .menu with flex layout classes for making menubars.

In the example below, .flex-sm has been used, so that the menu stays as a columnar menu below the md breakpoint width (i.e. below 768px, default), and becomes a menubar from that width up.

With some other simple components inside for proof of concept.

.menu.flex-sm.flex-wrap

<ul class="menu flex-sm">
  <li><a href="">Link 1</a></li>
  <li><a href="" class="t-nowrap">Link 2 with an integral badge<span class="badge bg-color-warning">1</span></a></li>
  <li><a href="">Link 3 with a label <span class="label bg-color-success t-white t-uppercase">New</span></a></li>
  <li><a href="" class="btn inline-block">Link 5</a></li>
  <li><a href="">Link 6</a></li>
</ul>

Example with an AplineJS powered dropdown:

Brand 
<div class="flex-sm flex-space-between bg-color-background-alt mb-3">
  <div class="p-2">
    <a class="t-lg t-bold t-decoration-none" href="#/">Brand</a>
  </div>
  <ul class="menu flex-sm flex-middle flex-end">
    <li><a href="#/">Home</a></li>
    <li class="flex-sm flex-end">
      <div
        class="relative"
        x-data="{ open: false }"
      >
        <a
          class="t-decoration-none flex flex-middle cursor-pointer"
          @click="open = !open"
          :aria-expanded="open ? 'true' : 'false'"
        >About 
        <!-- Down chevron icon -->
        </a>
        <div
          class="absolute right-sm bs b-thin rounded-sm bg-color-background"
          x-show="open"
          @click.away="open = false"
          style="min-width: 10rem"
        >
          <ul class="menu">
            <li><a href="">Company info</a></li>
            <li><a href="">Management</a></li>
            <li><a href="">Careers</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</div>