Skip to content
Skip to content

Menu

Our flexible menu component makes it easy to build many common navigation patterns.

Usage

Basic Menu

<ul class="c-menu">
  <li class="c-menu__item"><a href="#" class="c-menu__link">One</a></li>
  ...
  </ul>

  {{ Menu(
    [
      { "text": "One", "url": "#" },
      { "text": "Two", "url": "#" },
      { "text": "Three", "url": "#" },
      { "text": "Four", "url": "#" }
    ]
  ) }}

Item alignment

Right align (.c-menu--right)

<ul class="c-menu c-menu--right">
  <li class="c-menu__item"><a href="#" class="c-menu__link">One</a></li>
  ...
</ul>

{{ Menu(
  [
    { "text": "One", "url": "#" },
    { "text": "Two", "url": "#" },
    { "text": "Three", "url": "#" },
    { "text": "Four", "url": "#" }
  ],
  "c-menu--right"
) }}

Centred (.Menu--center)

<ul class="c-menu c-menu--center">
  <li class="c-menu__item"><a href="#" class="c-menu__link">One</a></li>
  ...
</ul>

{{ Menu(
  [
    { "text": "One", "url": "#" },
    { "text": "Two", "url": "#" },
    { "text": "Three", "url": "#" },
    { "text": "Four", "url": "#" }
  ],
  "c-menu--center"
) }}

Expanded (.c-menu--expanded)

<ul class="c-menu c-menu--expanded">
  <li class="c-menu__item"><a href="#" class="c-menu__link">One</a></li>
  ...
</ul>

{{ Menu(
  [
    { "text": "One", "url": "#" },
    { "text": "Two", "url": "#" },
    { "text": "Three", "url": "#" },
    { "text": "Four", "url": "#" }
  ],
  "c-menu--expanded"
) }}

Menu item alignment (.c-menu__item--right & .c-menu__item--left)

<ul class="c-menu">
  <li class="c-menu__item"><a href="#" class="c-menu__link">One</a></li>
  ...
  <li class="c-menu__item c-menu__item--right"><a href="#" class="c-menu__link">Four</a></li>
</ul>

<ul class="c-menu c-menu--right">
  <li class="c-menu__item c-menu__item--left"><a href="#" class="c-menu__link">One</a></li>
  ...
  <li class="c-menu__item"><a href="#" class="c-menu__link">Three</a></li>
</ul>

{{ Menu(
  [
    { "text": "One", "url": "#", "classList": "c-menu__item--left" },
    { "text": "Two", "url": "#" },
    { "text": "Three", "url": "#" },
    { "text": "Four", "url": "#" }
  ],
  "c-menu--right"
) }}

Active menu item state (.is-active)

<ul class="c-menu">
  <li class="c-menu__item"><span class="c-menu-title">c-menu title</span></li>
  <li class="c-menu__item is-active"><a href="#" class="c-menu__link">One</a></li>
  ...
</ul>

{{ Menu(
  [
    { "id": "one", "text": "One", "url": "#", "classList": "c-menu__item--left" },
    { "id": "two", "text": "Two", "url": "#" },
    { "id": "three", "text": "Three", "url": "#" },
    { "id": "four", "text": "Four", "url": "#" }
  ],
  "",
  "two"
) }}

Menu header (.c-menu__header)

<ul class="c-menu">
  <li class="c-menu__item"><span class="c-menu-title">c-menu title</span></li>
  <li class="c-menu__item"><a href="#" class="c-menu__link">One</a></li>
  ...
</ul>

{{ Menu(
  [
    { "text": "Menu header", "header": true },
    { "text": "One", "url": "#" },
    { "text": "Two", "url": "#" },
    { "text": "Three", "url": "#" },
    { "text": "Four", "url": "#" }
  ]
) }}

Vertical menu (.Menu--vertical)

<ul class="c-menu c-menu--vertical">
  <li class="c-menu__item"><span class="c-menu__header">c-menu header</span></li>
  <li class="c-menu__item"><a href="#" class="c-menu__link">One</a></li>
  ...
</ul>

{{ Menu(
  [
    { "text": "Menu header", "header": true },
    { "text": "One", "url": "#" },
    { "text": "Two", "url": "#" },
    { "text": "Three", "url": "#" },
    { "text": "Four", "url": "#" }
  ],
  "c-menu--vertical"
) }}

Vertical nested menu

Responsive menu (.c-menu@xs, .c-menu@sm, .c-menu@md,. c-menu@lg)

Unstyled links

<ul class="c-menu">
  <li class="c-menu__item"><a href="#" class=" ">One</a></li>
  ...
</ul>

{{ Menu(
  [
    { "text": "One", "url": "#", "linkClassList": " " },
    { "text": "Two", "url": "#", "linkClassList": " " },
    { "text": "Three", "url": "#", "linkClassList": " " },
    { "text": "Four", "url": "#", "linkClassList": " " }
  ]
) }}

Icon links

<ul class="c-menu">
  <li class="c-menu__item">
    <a href="#" class="c-menu__link">
      <span class="o-icon o-icon--sc-facebook ">
        <svg viewBox="0 0 1 1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://jaywing.github.io/atomic-framework/images/icons.svg#sc-facebook"></use></svg>
      </span>
    </a>
  </li>
  ...
</ul>

{{ Menu(
  [
    { "text": "", "url": "#", "icon": "sc-facebook" },
    { "text": "", "url": "#", "icon": "sc-twitter" },
    { "text": "", "url": "#", "icon": "sc-google-plus" },
    { "text": "", "url": "#", "icon": "sc-youtube" }
  ]
) }}

Tabular menu (.c-menu--tabular)

Attached menu (.c-menu--attached)

It is possible to attached the menu to other attachable items, for example, the panel component, to create a tab like component.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error illum magnam minima placeat rem! Ab at beatae culpa deleniti excepturi, exercitationem illo laboriosam nostrum officia perspiciatis recusandae sequi tempora voluptates.

<ul class="c-menu c-menu--tabular c-menu--attached">
  <li class="c-menu__item is-active"><a href="#" class="c-menu__link">One</a></li>
  ....
</ul>
<div class="c-panel c-panel--box c-panel--attached c-panel--stacked">
  ....
</div>
<ul class="c-menu">
  <li class="c-menu__item"><span class="c-menu-title">c-menu title</span></li>
  <li class="c-menu__item is-active"><a href="#" class="c-menu__link">One</a></li>
  ...
</ul>
Class Description Type
.c-menu Set Menu to use flexbox and aligns items to the left by default Component
.c-menu[@xs,@sm,@md,@lg] Used in conjunction with c-menu--vertical to break to horizonal at 480px, 640px, 768px or 960px Responsive modifier
.c-menu--right Aligns items to the right Component modifier
.c-menu--center Aligns items centrally Component modifier
.c-menu--expanded Menu items expand to fill the available space Component modifier
.c-menu--vertical Aligned menu items vertically in a stacked menu Component modifier
.c-menu--flush Removes the left margin of a nested vertical menu Component modifier
.c-menu__item A menu item Sub-element
.c-menu__item--right Aligns menu item to the right if the menu is left aligned Sub-element modifier
.c-menu__item--left Aligns menu item to the left if the menu is right aligned Sub-element modifier
.c-menu__item.is-active A active menu item Active state
.c-menu__link A menu link Sub-element
.c-menu__header A menu header Sub-element