Dropdown widget (or: menu, pulldown)

Dropdowns allow to toggle an element's visibility. They usually contain some sort of navigation, be it a bare list of links, or more complex elements. They can offer one to multiple nesting levels.

Dropdown

We do not call dropdowns simply "menu" as dropdowns can have a much wider field of application than menus of traditional applications.

General requirements

The following requirements are based on well established best practices and WAI-ARIA Authoring Practices: Menu Widget (W3.org).

Besides many other requirements, we want to stress out explicitly the following:

The meaning and usage of the dropdown must be clear.
The dropdown must be operable using both keyboard only and screen readers (with a reasonable interplay of default keys like Tab, Enter/Space, Esc, Arrow keys), as well as mobile screen readers.
Proper feedback must be given upon opening/closing a dropdown.

By the way, dropdowns are very similar to:

Non-modal dialogs, see Dialog widget (or: modal, popup, lightbox, alert)
Complex tooltips, see Tooltip widgets (or: screen tip, balloon)

Proof of concepts

Before you go on, please read What is a "Proof of concept"?.

This simple dropdown offers a single expandable level.

Simple dropdown

Show HTML code

Show CSS code

Show JS code

✔ (pass) ,

✔ (pass)

<button>Focusable element before</button>
<ol data-adg-dropdown="">
  <li>
    <button aria-expanded="false">▾ Physical activities</button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Playing soccer</a>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Dancing</a>
      </li>
    </ol>
  </li>
  <li>
    <button aria-expanded="false">▾ Relaxing activities</button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=movies">Watching movies</a>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=meditate">Meditate</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=others">Others</a>
  </li>
</ol>
<p>
  <button>Focusable element after</button>
</p>

*:focus {
  outline: 2px dotted #000;
}

p {
  clear: left;
}
p button {
  margin-top: 20px;
}

ol {
  padding: 1px;
  width: 100%;
}
ol > li {
  float: left;
  list-style: none;
  position: relative;
}
ol a, ol button {
  display: block;
  border: 1px solid #000;
  color: #000;
  background-color: lightyellow;
  padding: 10px;
  width: 200px;
  box-sizing: border-box;
  text-decoration: none;
}
ol a:hover, ol button:hover {
  text-decoration: underline;
}
ol button {
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;
  height: 40px;
}
ol button:hover {
  cursor: pointer;
}
ol button[aria-expanded="true"] + ol {
  position: absolute;
}
ol button[aria-expanded="false"] + ol {
  display: none;
}

;(function () {
  var AdgDropdown

  AdgDropdown = class AdgDropdown {
    constructor(el) {
      this.$el = $(el)
      this.initExpandables()
    }

    initExpandables() {
      return this.$el.find('[aria-expanded]').click(e => {
        var $button, $container
        $button = $(e.target)
        $container = $($button.next('*'))
        if ($container.is(':visible')) {
          return this.hide($button, $container)
        } else {
          return this.show($button, $container)
        }
      })
    }

    show($button, $container) {
      $container.attr('hidden', false)
      return $button.attr('aria-expanded', true)
    }

    hide($button, $container) {
      $container.attr('hidden', true)
      return $button.attr('aria-expanded', false)
    }
  }

  $(document).ready(function () {
    return $('[data-adg-dropdown]').each(function () {
      return new AdgDropdown(this)
    })
  })
}).call(this)

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-6-11
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-6-11

Implementation details

Some interesting peculiarities:

Each dropdown toggler has an aria-expanded="false" attribute; its value (true/false) and the visibility of the corresponding content is toggled using JavaScript. See Marking elements expandable using aria-expanded.
The dropdown's content is toggled using hidden attribute (see Hiding elements from all devices).
Dropdown togglers are implemented as <button> elements (in contrast to the links, see below for further explanations).
By using nested lists, screen readers can announce when entering (and leaving) lists, and the total number of elements of the current list.

Adding more sophisticated keyboard interaction features like closing a dropdown using Esc or navigating it using Arrow keys would be easy. For simplicity though, we refrained from doing this.

Some dropdowns offer more than a single nesting level. Simply add more nested lists to make this happen:

Multi-level dropdown

Show HTML code

Show CSS code

Show JS code

✔ (pass) ,

✔ (pass)

<button>Focusable element before</button>
<ol data-adg-dropdown="">
  <li>
    <button aria-expanded="false">▾ Physical activities</button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Playing soccer</a>
      </li>
      <li>
        <button aria-expanded="false">▸ Dancing</button>
        <ol>
          <li>
            <a href="http://www.google.ch/search?q=salsa">Salsa</a>
          </li>
          <li>
            <a href="http://www.google.ch/search?q=rocknroll">Rock'n'Roll</a>
          </li>
          <li>
            <button aria-expanded="false">▸ Swing</button>
            <ol>
              <li>
                <a href="http://www.google.ch/search?q=lindyhop">Lindy Hop</a>
              </li>
              <li>
                <a href="http://www.google.ch/search?q=charleston">Charleston</a>
              </li>
            </ol>
          </li>
        </ol>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=gardening">Gardening</a>
      </li>
    </ol>
  </li>
  <li>
    <button aria-expanded="false">▾ Relaxing activities</button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=movies">Watching movies</a>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=meditate">Meditate</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=others">Others</a>
  </li>
</ol>
<p>
  <button>Focusable element after</button>
</p>

*:focus {
  outline: 2px dotted #000;
}

p {
  clear: left;
}
p button {
  margin-top: 20px;
}

ol {
  padding: 0;
}
ol > li {
  float: left;
  list-style: none;
  position: relative;
}
ol a, ol button {
  display: block;
  border: 1px solid #000;
  color: #000;
  background-color: lightyellow;
  padding: 10px;
  width: 200px;
  box-sizing: border-box;
  text-decoration: none;
}
ol a:hover, ol button:hover {
  text-decoration: underline;
}
ol button {
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;
  height: 40px;
}
ol button:hover {
  cursor: pointer;
}
ol button[aria-expanded="true"] + ol {
  position: absolute;
}
ol button[aria-expanded="true"] + ol ol {
  left: 100%;
  top: 0;
}
ol button[aria-expanded="false"] + ol {
  display: none;
}

;(function () {
  var AdgDropdown

  AdgDropdown = class AdgDropdown {
    constructor(el) {
      this.$el = $(el)
      this.initExpandables()
    }

    initExpandables() {
      return this.$el.find('[aria-expanded]').click(e => {
        var $button, $container
        $button = $(e.target)
        $container = $($button.next('*'))
        if ($container.is(':visible')) {
          return this.hide($button, $container)
        } else {
          return this.show($button, $container)
        }
      })
    }

    show($button, $container) {
      $container.attr('hidden', false)
      return $button.attr('aria-expanded', true)
    }

    hide($button, $container) {
      $container.attr('hidden', true)
      return $button.attr('aria-expanded', false)
    }
  }

  $(document).ready(function () {
    return $('[data-adg-dropdown]').each(function () {
      return new AdgDropdown(this)
    })
  })
}).call(this)

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-6-11
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-6-11

It is debatable how user friendly menus with deeply nested levels really are though. A good compromise is to keep the nested lists, but without the need of toggling their visibility.

Multi-level dropdown with sub levels always open

Show HTML code

Show CSS code

Show JS code

✔ (pass) ,

✔ (pass)

<button>Focusable element before</button>
<ol data-adg-dropdown="">
  <li>
    <button aria-expanded="false">▾ Physical activities</button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Playing soccer</a>
      </li>
      <li>
        <span>Dancing</span>
        <ol>
          <li>
            <a href="http://www.google.ch/search?q=salsa">Salsa</a>
          </li>
          <li>
            <a href="http://www.google.ch/search?q=rocknroll">Rock'n'Roll</a>
          </li>
          <li>
            <span>Swing</span>
            <ol>
              <li>
                <a href="http://www.google.ch/search?q=lindyhop">Lindy Hop</a>
              </li>
              <li>
                <a href="http://www.google.ch/search?q=charleston">Charleston</a>
              </li>
            </ol>
          </li>
        </ol>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=gardening">Gardening</a>
      </li>
    </ol>
  </li>
  <li>
    <button aria-expanded="false">▾ Relaxing activities</button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=movies">Watching movies</a>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=meditate">Meditate</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=others">Others</a>
  </li>
</ol>
<p>
  <button>Focusable element after</button>
</p>

*:focus {
  outline: 2px dotted #000;
}

p {
  clear: left;
}
p button {
  margin-top: 20px;
}

ol {
  padding: 0;
}
ol > li {
  float: left;
  list-style: none;
  position: relative;
}
ol a, ol button, ol span {
  display: block;
  border: 1px solid #000;
  color: #000;
  background-color: lightyellow;
  padding: 10px;
  width: 200px;
  box-sizing: border-box;
  text-decoration: none;
}
ol a:hover, ol button:hover {
  text-decoration: underline;
}
ol span {
  font-style: italic;
}
ol button {
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;
  height: 40px;
}
ol button:hover {
  cursor: pointer;
}
ol button[aria-expanded="true"] + ol {
  position: absolute;
}
ol button[aria-expanded="true"] + ol ol a, ol button[aria-expanded="true"] + ol ol span {
  padding-left: 40px;
}
ol button[aria-expanded="true"] + ol ol ol a, ol button[aria-expanded="true"] + ol ol ol span {
  padding-left: 80px;
}
ol button[aria-expanded="false"] + ol {
  display: none;
}

;(function () {
  var AdgDropdown

  AdgDropdown = class AdgDropdown {
    constructor(el) {
      this.$el = $(el)
      this.initExpandables()
    }

    initExpandables() {
      return this.$el.find('[aria-expanded]').click(e => {
        var $button, $container
        $button = $(e.target)
        $container = $($button.next('*'))
        if ($container.is(':visible')) {
          return this.hide($button, $container)
        } else {
          return this.show($button, $container)
        }
      })
    }

    show($button, $container) {
      $container.attr('hidden', false)
      return $button.attr('aria-expanded', true)
    }

    hide($button, $container) {
      $container.attr('hidden', true)
      return $button.attr('aria-expanded', false)
    }
  }

  $(document).ready(function () {
    return $('[data-adg-dropdown]').each(function () {
      return new AdgDropdown(this)
    })
  })
}).call(this)

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-6-11
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-6-11

Admittedly, this is already pretty close to a mega dropdown (see below).

Another use case is dropdowns serving a double-purpose: offering both toggling a dropdown and navigating to an element.

There are implementations of this pattern that realise this with a single element:

When hovering it, the dropdown is opened.
When activating it, the browser navigates to an URL.

The problem with this is that the hover event is only available to pointing devices (like a mouse): whether keyboard only, nor screen reader, nor touch screen users would be able to use such an implementation (for further discussion about hover, see below).

The best bet for this requirement is to implement both an element for toggling the dropdown and for navigating to an element:

Double-purpose dropdown

Show HTML code

Show CSS code

Show JS code

✔ (pass) ,

✔ (pass)

<button>Focusable element before</button>
<ol data-adg-dropdown>
  <li>
    <a href="http://www.google.ch/search?q=physical">Physical activities</a>
    <button type="button" aria-expanded="true" aria-controls="dropdown01">
      ▾<span class="visually-hidden">Open physical activities</span>
    </button>
    <ol id="dropdown01">
      <li>
        <a href="http://www.google.ch/search?q=soccer">Playing soccer</a>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Dancing</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=relaxing">Relaxing activities</a>
    <button type="button" aria-expanded="true" aria-controls="dropdown02">
      ▾<span class="visually-hidden">Open relaxing activities</span>
    </button>
    <ol id="dropdown02">
      <li>
        <a href="http://www.google.ch/search?q=movies">Watching movies</a>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=meditate">Meditate</a>
      </li>
    </ol>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=others">Others</a>
  </li>
</ol>
<p>
  <button>Focusable element after</button>
</p>

*:focus {
  outline: 2px dotted #000;
}

p {
  clear: left;
}
p button {
  margin-top: 20px;
}

.visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

ol {
  padding: 0;
  display: flex;
  list-style: none;
}
ol ol {
  position: absolute;
  right: 0;
  top: 100%;
  flex-direction: column;
}
ol[hidden] {
  display: none;
}

ol li {
  position: relative;
  display: flex;
}

ol button {
  all: inherit;
}
ol a,
ol button {
  display: block;
  border: 1px solid #000;
  color: #000;
  background-color: lightyellow;
  padding: 10px;
  width: 170px;
  box-sizing: border-box;
  text-decoration: none;
}
ol button {
  width: auto;
  margin-left: -1px;
  cursor: pointer;
}
ol a:hover,
ol button:hover {
  text-decoration: underline;
}
ol ol a {
  width: 200px;
}

class AdgDropdown {
  constructor(element) {
    this.element = element
    this.buttons = this.element.querySelectorAll('[aria-expanded]')

    this.init()
  }

  init() {
    this.buttons.forEach(button => {
      const containerId = button.getAttribute('aria-controls')
      const container = document.querySelector(`#${containerId}`)

      this.hide(button, container)

      button.addEventListener('click', event => {
        const button = event.target

        if (!container.hidden) {
          this.hide(button, container)
        } else {
          this.show(button, container)
        }
      })
    })
  }

  show(button, container) {
    container.hidden = false
    button.setAttribute('aria-expanded', true)
  }

  hide(button, container) {
    container.hidden = true
    button.setAttribute('aria-expanded', false)
  }
}

// Init dropdowns and keep track of them
const dropdowns = []

document.querySelectorAll('[data-adg-dropdown]').forEach(element => {
  dropdowns.push(new AdgDropdown(element))
})

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-6-11
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-6-11

A mega dropdown can contain much more than a simple collection of links: it can contain (nearly) everything that is structured content, be it paragraphs, images, form elements, etc.

Mega dropdown

Show HTML code

Show CSS code

Show JS code

✔ (pass) ,

✔ (pass)

<button>Focusable element before</button>
<ol data-adg-dropdown="">
  <li>
    <button aria-expanded="false">▾ Physical activities</button>
    <ol>
      <li>
        <a href="http://www.google.ch/search?q=soccer">Playing soccer
          <p>
            Soccer is a team sport played between two teams of eleven players with a spherical ball.
          </p>
        </a>
      </li>
      <li>
        <span>Dancing
          <p>
            Dance is a performing art form consisting of purposefully selected sequences of human movement.
          </p>
        </span>
        <ol>
          <li>
            <a href="http://www.google.ch/search?q=salsa">Salsa
              <p>
                Salsa is a popular form of social dance that originated in the Caribbean.
              </p>
            </a>
          </li>
          <li>
            <a href="http://www.google.ch/search?q=rocknroll">Rock'n'Roll
              <p>
                Rock'n'Roll is a very athletic, competitive form of partner dance that originated from lindy hop.
              </p>
            </a>
          </li>
        </ol>
      </li>
      <li>
        <a href="http://www.google.ch/search?q=gardening">Gardening
          <p>
            Gardening is the practice of growing and cultivating plants as part of horticulture.
          </p>
        </a>
      </li>
    </ol>
  </li>
  <li>
    <button aria-expanded="false">▾ Login</button>
    <form>
      <p>
        Please fill out the form below with your credentials.
      </p>
      <fieldset>
        <legend>Login</legend>
        <div>
          <label for="login">Name</label><input id="login" type="text" />
        </div>
        <div>
          <label for="password">Password</label><input id="password" type="password" />
        </div>
        <div>
          <input type="submit" value="Login" />
        </div>
      </fieldset>
      <p>
        No credentials yet? Please do something of the following:
      </p>
      <ul>
        <li>
          Register your own account.
        </li>
        <li>
          Hack another user's account.
        </li>
        <li>
          Leave and never come back.
        </li>
      </ul>
    </form>
  </li>
  <li>
    <a href="http://www.google.ch/search?q=about">About</a>
  </li>
</ol>
<p>
  <button>Focusable element after</button>
</p>

*:focus {
  outline: 2px dotted #000;
  outline-offset: 2px;
}

p {
  clear: left;
}
p button {
  margin-top: 20px;
}

ol {
  padding: 0;
}
ol > li {
  float: left;
  list-style: none;
  position: relative;
}
ol a, ol button, ol span {
  display: block;
  border: 1px solid #000;
  color: #000;
  background-color: lightyellow;
  padding: 10px;
  width: 200px;
  box-sizing: border-box;
}
ol span {
  font-style: italic;
}
ol a, ol button {
  text-decoration: none;
}
ol a:hover, ol button:hover {
  text-decoration: underline;
}
ol button {
  font-size: inherit;
  font-family: inherit;
  text-align: inherit;
  height: 40px;
}
ol button:hover {
  cursor: pointer;
}
ol button[aria-expanded="true"] + form, ol button[aria-expanded="true"] + ol {
  position: absolute;
  background-color: lightyellow;
  border: 1px solid #000;
}
ol button[aria-expanded="true"] + form {
  left: -100px;
  right: -100px;
  padding: 10px;
}
ol button[aria-expanded="true"] + form label {
  display: inline-block;
  width: 100px;
  margin-bottom: 10px;
}
ol button[aria-expanded="true"] + ol {
  position: absolute;
}
ol button[aria-expanded="true"] + ol a, ol button[aria-expanded="true"] + ol span {
  font-weight: bold;
  width: 500px;
}
ol button[aria-expanded="true"] + ol p {
  font-weight: normal;
  display: inline-block;
}
ol button[aria-expanded="true"] + ol ol a, ol button[aria-expanded="true"] + ol ol span {
  padding-left: 40px;
}
ol button[aria-expanded="true"] + ol ol ol a, ol button[aria-expanded="true"] + ol ol ol span {
  padding-left: 80px;
}
ol button[aria-expanded="false"] + ol, ol button[aria-expanded="false"] + form {
  display: none;
}

;(function () {
  var AdgDropdown

  AdgDropdown = class AdgDropdown {
    constructor(el) {
      this.$el = $(el)
      this.initExpandables()
    }

    initExpandables() {
      return this.$el.find('[aria-expanded]').click(e => {
        var $button, $container
        $button = $(e.target)
        $container = $($button.next('*'))
        if ($container.is(':visible')) {
          return this.hide($button, $container)
        } else {
          return this.show($button, $container)
        }
      })
    }

    show($button, $container) {
      $container.attr('hidden', false)
      return $button.attr('aria-expanded', true)
    }

    hide($button, $container) {
      $container.attr('hidden', true)
      return $button.attr('aria-expanded', false)
    }
  }

  $(document).ready(function () {
    return $('[data-adg-dropdown]').each(function () {
      return new AdgDropdown(this)
    })
  })
}).call(this)

Category	Result	Comments	Date
Keyboard only	✔ (pass) pass	-	2018-6-11
NVDA 2018.1 + FF Quantum 59.0.2	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + IE 11	✔ (pass) pass	-	2018-6-11
JAWS 2018.3 + FF ESR 52.7.3	✔ (pass) pass	-	2018-6-11

Further discussions

What elements belong in dropdowns?

As explained above, mega dropdowns can contain structured content of various kind. Be sure not overuse this possibility though. For example, stuffing "big" structural elements like headings (<h1> to <h6>) or HTML 5 sectioning elements (like <article> or <header>) into these pretty basic structures of nested lists (<ol>) does not feel right.

If you really want to do something like that though, you should rather think of it as non-modal dialogs, see Dialog widget (or: modal, popup, lightbox, alert).

Comboboxes as alternative?

In earlier days, comboboxes (together with some JavaScript) were often used as simple alternative to dropdown menus.

<fieldset>
  <legend>Quick navigation</legend>

  <select>
    <option>Home</option>
    <option>Products</option>
    <option>Help</option>
    <option>About</option>
  </select>

  <button>Go!</button>
</fieldset>

This remains a valid technique up to the present day, and using <optgroup>, the dropdown can even be nested to a single level.

As these standard controls' styling capabilities are limited though, they are seldom used nowadays.

Toggle on hover?

There is a big debate whether dropdown menus should open on hover. First of all: unintentional hovering may cause flickering of elements. But there are also confusing (if not disrupting or even misleading) behaviours attached to dropdowns that open (or close) on hover.

Look at this scenario: a user hovers over a dropdown and clicks on it, but nothing seems to happen. This is due to the fact that the dropdown already was triggered to open by hover, and clicking on it closes it immediately again.

An even worse scenario is this: a user wants to click an element right below a closed dropdown. While moving the mouse over the dropdown (which is of no interest to the user at this time), the hover event opens the dropdown and overlaps the target element, causing the fast user to click on an element in the dropdown instead.

The worst are elements that toggle a dropdown on hover and navigate to a website by activation. This is extremely confusing for all sorts of users (be it with or without special needs), and pretty hard to implement in an accessible way.

There are a lot of tricks and workarounds to minimise the problems depicted above, like using timeouts or visual effects. But in general, the problems remain, and the workarounds potentially lead to new side effects (or even less intuitive behaviours).

In our opinion, hovering events should only be used for purely visual purposes, and toggling the visibility of content is by no means purely visual. So it is much better to only open (and close) dropdowns on dedicated activation by the user.

Links or buttons?

In our dropdown implementations, we use <button> elements to toggle dropdowns. In other implementations however, these are often implemented as <a href="#">, <a href="javascript:;">, or similar, which is clearly less appropriate.

While <button>s clearly indicate some interactivity, links suggest users to navigate somewhere. So changing an element's visibility is clearly a moment of interaction, not of navigation. And although in earlier days buttons could not be styled as well as links, this changed a lot recently, so there is no excuse anymore for mis-using links as buttons.

You are here:

Dropdown widget (or: menu, pulldown)

General requirements

Proof of concepts

Simple dropdown

Implementation details

Multi-level dropdown

Double-purpose dropdown

Mega dropdown

Further discussions

What elements belong in dropdowns?

Comboboxes as alternative?

Toggle on hover?

Links or buttons?

Previous/next navigation