Dropdown • Natura11y Design Ecosystem

Natura11y provides three dropdown patterns for navigation: a standard button dropdown, a dropdown link split for top-level page access with sub-navigation, and a mega menu for rich multi-column panels.

Include dropdown items within .nav and .nav--divider selectors, as well as within the .main-menu__nav selector inside the main menu component.

Natura11y provides two types of dropdown functionality:

Click dropdowns (default): Activated by clicking the dropdown button
Hover dropdowns: Activated by hovering on desktop or clicking on mobile/tablet

To create a dropdown, add the .dropdown class and data-toggle="dropdown" attribute to a <button>. Add a sibling <ul> with the .dropdown__menu class. For hover functionality, add data-hover="true" to the button.

1
      <ul class="nav nav--divider border nav--horizontal">
2

3
          <li>
4

5
              <button
6
                  class="dropdown"
7
                  data-toggle="dropdown"
8
                  aria-controls="click-menu-id"
9
                  aria-expanded="false"
10
                  type="button"
11
              >
12
                  <span class="text">
13
                      Click Dropdown
14
                  </span>
15
              </button>
16

17
              <ul class="dropdown__menu" id="click-menu-id">
18
                  <li>
19
                      <a href="#1">Link</a>
20
                  </li>
21
                  <li>
22
                      <a href="#1">Link</a>
23
                  </li>
24
                  <li>
25
                      <a href="#1">Link</a>
26
                  </li>
27
              </ul>
28

29
          </li>
30
          <li>
31

32
              <button
33
                  class="dropdown"
34
                  data-toggle="dropdown"
35
                  data-hover="true"
36
                  aria-controls="hover-menu-id"
37
                  aria-expanded="false"
38
                  type="button"
39
              >
40
                  <span class="text">
41
                      Hover Dropdown
42
                  </span>
43
              </button>
44

45
              <ul class="dropdown__menu" id="hover-menu-id">
46
                  <li>
47
                      <a href="#1">Link</a>
48
                  </li>
49
                  <li>
50
                      <a href="#1">Link</a>
51
                  </li>
52
                  <li>
53
                      <a href="#1">Link</a>
54
                  </li>
55
              </ul>
56

57
          </li>
58

59
      </ul>

Figure 1

Figure 1 notes
Lines	Details
5-15	The first dropdown uses the default click behavior. The `data-toggle="dropdown"` attribute is required, along with `aria-controls` referencing the dropdown menu ID.
32-43	The second dropdown includes the `data-hover="true"` attribute. This enables hover functionality on desktop devices with fine pointer control, while maintaining click functionality on mobile devices.

Dropdowns work as you might expect within vertical navigation:

      <ul class="nav nav--divider">
          ...
      </ul>

Figure 2

Custom Indicator Icon

By default, the .dropdown button uses a CSS border caret as its direction indicator—no icon font required. To use an icon font character instead, add a data-indicator attribute with the glyph character or HTML entity (e.g. data-indicator="").

To replace the default CSS caret with a Natura11y icon, add data-indicator to the button with the icon’s Unicode value. This requires the Natura11y icon font.

      <button
          class="dropdown"
          data-toggle="dropdown"
          data-indicator="&#xf10e;"
          aria-controls="menu-id"
          aria-expanded="false"
          type="button"
      >
          <span class="text">
              Dropdown
          </span>
      </button>

Figure 3

The .dropdown-link-split selector combines a direct link to a top-level page with a dropdown button for accessing sub-pages. This pattern provides better accessibility and user experience by offering multiple interaction methods:

Link access: Click or tap the link text to go directly to the main page
Desktop dropdown: Hover over the entire component to reveal sub-pages
Mobile dropdown: Tap the dropdown button to access sub-pages
Keyboard navigation: Tab to the dropdown button independently from the link

To create this pattern, include both an <a> tag and a <button> with the data-toggle="dropdown" attribute within a .dropdown-link-split wrapper (Figure 4, line 4). Place the related dropdown or mega menu inside the same <li>.

This approach is particularly useful for main navigation where you want to provide direct access to category pages while also offering sub-navigation options.

Dropdown Link Split Example

1
      <ul class="nav nav--horizontal">
2

3
          <li>
4
              <div class="dropdown-link-split">
5

6
                  <a href="#1" class="text">
7
                      Link
8
                  </a>
9

10
                  <button
11
                      data-toggle="dropdown"
12
                      aria-controls="docs-dropdown"
13
                      aria-expanded="false"
14
                      type="button">
15
                  </button>
16

17
              </div>
18

19
              <ul class="dropdown__menu" id="docs-dropdown">
20
                  <li>
21
                      <a href="#1">Link</a>
22
                  </li>
23
                  <li>
24
                      <a href="#1">Link</a>
25
                  </li>
26
              </ul>
27

28
          </li>
29

30
      </ul>

Figure 4

Figure 4 notes
Lines	Details
4	The `.dropdown-link-split` wrapper class is required. It contains both the main link and the dropdown button, providing the dual functionality of the component.
6-8	The `<a>` tag within the wrapper is required. This provides the direct link functionality, allowing users to navigate directly to the top-level page.
10-15	The `<button>` with `data-toggle="dropdown"` attribute is required. The `aria-controls` attribute should reference the ID of the associated dropdown menu. This button provides access to the sub-navigation dropdown.

The .dropdown-link-split functionality remains the same as standard dropdowns, supporting both keyboard navigation and screen readers.

Inside .nav--divider and .main-menu__nav on mobile, the component renders as a split row: the .text link spans the full width, and the toggle button becomes a square tap target beside it using var(--subtle-fill-1) as its background. At desktop breakpoints, the layout resets to the standard inline appearance.

This pattern also works with mega menus — simply replace the .dropdown__menu list with a .mega-menu--{bp} element for larger, multi-column dropdown content.

The mega menu replaces a standard .dropdown__menu list with a <div> using the .mega-menu--{bp} class. This allows any content—grids, grouped links, images—inside the dropdown panel.

Mega Menu Example

1
      <ul class="nav nav--horizontal">
2

3
          <li>
4

5
              <button
6
                  class="dropdown"
7
                  data-toggle="dropdown"
8
                  data-hover="true"
9
                  aria-controls="mega-id"
10
                  aria-expanded="false"
11
                  type="button"
12
              >
13
                  <span class="text">
14
                      Label
15
                  </span>
16
              </button>
17

18
              <div class="mega-menu--lg" id="mega-id">
19

20
                  <div class="grid grid--column-4--lg gap-4">
21

22
                      <nav>
23
                          <p><strong>Column One</strong></p>
24
                          <ul class="nav">
25
                              <li><a href="#1">Link</a></li>
26
                              <li><a href="#1">Link</a></li>
27
                              <li><a href="#1">Link</a></li>
28
                          </ul>
29
                      </nav>
30

31
                      <nav>
32
                          <p><strong>Column Two</strong></p>
33
                          <ul class="nav">
34
                              <li><a href="#1">Link</a></li>
35
                              <li><a href="#1">Link</a></li>
36
                              <li><a href="#1">Link</a></li>
37
                          </ul>
38
                      </nav>
39

40
                  </div>
41

42
              </div>
43

44
          </li>
45

46
      </ul>

Figure 5

Figure 5 notes
Lines	Details
18	The `.mega-menu--{bp}` class replaces `.dropdown__menu`. It is a `<div>` rather than a `<ul>`, which allows any content inside — grids, grouped links, images, and more. The `{bp}` modifier sets the breakpoint at which the mega menu layout is applied.
5-16	The same trigger pattern as a standard dropdown applies. Include `data-toggle="dropdown"`, `aria-controls` referencing the mega menu ID, and `aria-expanded="false"`. Add `data-hover="true"` to enable hover behavior on desktop.

No results found for ''

Introduction

Dropdown behavior

Custom Indicator Icon

Dropdown Link Split

Mega Menu

Read Next

Main Menu

Navigation

Button