Basic menus

By Ken Hawkins

built-in navigation layout menus Requires EBI Visual Framework 1.1.0, 1.2.0

Basic horizontal, vertical and simple vertical (tree) menus.

Contribute a pattern

Have a great way of doing something, add it to the Style Lab. Here's how

Implementation code

Get a zip with all the sample HTML and any spaecial CSS or JS needed: Download a ZIP file More on how to use this

HTML
<div class="column">
  {{#markdown}}Horziontal menu: `ul.menu`{{/markdown}}
  <ul class="menu no-underline">
    <li><a href="#">Item 1</a></li>
    <li><a class="active" href="#">Item 2 (active)</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</div>

<div class="column">
  {{#markdown}}Verital menu: `ul.menu.vertical`{{/markdown}}
  <ul class="menu vertical">
    <li><a href="#">Item 1</a></li>
    <li><a class="active" href="#">Item 2 (active)</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
  </ul>
</div>

<div class="column">
  {{#markdown}}Nested tree menu: `ul.simple.vertical.menu`{{/markdown}}
  <ul class="simple vertical menu">
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Sub-parent</a>
    <ul class="simple menu">
      <li><a href="#">Child 1</a></li>
      <li><a class="active" href="#">Child 2 (active)</a></li>
      <li><a href="#">Child 3</a></li>
      <li><a href="#">Child 4</a></li>
    </ul>
    </li>
    <li><a href="#">Item 4</a></li>
  </ul>
</div>
JS

Similar Building Blocks

navigation

Related links box
navigation

Local-nav menu
navigation

Compact masthead