Main Menu • Natura11y Design Ecosystem

The main menu is a complete responsive header system with four preassigned areas: logo, nav, search, and actions. Two layout variants are available: bar places the menu inline with the logo, while stack places it below, spanning the full width. Both variants share the same child selectors and differ only in their parent modifier class.

The .main-menu--bar--{bp} selector places the main menu inline with the logo. Here, bp is the responsive breakpoint at which the component transitions from its mobile stacked layout to the desktop inline layout (e.g. lg for large). At this breakpoint the toggle buttons are hidden and the full menu is displayed.

Main Menu Bar Example

1
<div class="main-menu--bar--lg">
2

3
  <div class="main-menu__logo">
4
    <a href="#1" title="Home" data-logo="brand">
5
      <!-- Placeholder logo, replace the following <svg> with your own -->
6
      <svg xmlns="http://www.w3.org/2000/svg" width="126" height="34" viewBox="0 0 126 34" aria-hidden="true">
7
        ...
8
      </svg>
9
    </a>
10
  </div>
11

12
  <nav class="main-menu__nav" id="main-menu" aria-label="Main Menu">
13
    <ul>
14
      <li>
15
        <button
16
          class="dropdown"
17
          data-toggle="dropdown"
18
          aria-controls="menu-1"
19
          aria-expanded="false"
20
          data-hover="true"
21
          type="button"
22
        >
23
          <span class="text">Dropdown</span>
24
        </button>
25
        <ul class="dropdown__menu box-shadow-1--lg" id="menu-1">
26
          <li>
27
            <a href="#1">Link</a>
28
          </li>
29
          <li>
30
            <a href="#1">Link</a>
31
          </li>
32
          <li>
33
            <a href="#1">Link</a>
34
          </li>
35
        </ul>
36
      </li>
37
      <li>
38
        <a href="#1">Link</a>
39
      </li>
40
      <li>
41
        <a href="#1">Link</a>
42
      </li>
43
    </ul>
44
  </nav>
45

46
  <div class="main-menu__toggle">
47
    <button
48
      class="button button--icon-only"
49
      aria-label="Search"
50
      data-toggle="collapse"
51
      aria-controls="search"
52
      data-target-close="main-menu"
53
      aria-expanded="false"
54
      type="button"
55
    >
56
      <span class="icon icon-search" aria-hidden="true"></span>
57
    </button>
58
    <button
59
      class="button button--icon-only"
60
      aria-label="Menu"
61
      data-toggle="collapse"
62
      aria-controls="main-menu"
63
      data-target-close="search"
64
      aria-expanded="false"
65
      type="button"
66
    >
67
      <span class="icon icon-menu" aria-hidden="true"></span>
68
    </button>
69
  </div>
70

71
  <form class="main-menu__search" id="search" role="search" data-focus-first>
72
    <div class="form-entry form-entry--search" aria-label="Search">
73
      <label class="form-entry__field">
74
        <span class="form-entry__field__label screen-reader-only">Search</span>
75
        <span class="form-entry__field__input">
76
          <input type="search" id="global-search" name="global-search">
77
          <button
78
            class="button button--icon-only"
79
            type="button"
80
            data-search-clear
81
            aria-label="Clear search"
82
            aria-controls="global-search"
83
          >
84
            <span class="icon icon-clear" aria-hidden="true"></span>
85
          </button>
86
          <button class="button theme-primary" type="submit">Search</button>
87
        </span>
88
      </label>
89
    </div>
90
  </form>
91

92
  <div class="main-menu__actions">
93
    <button class="button button--icon-only" aria-label="Language" type="button">
94
      <span class="icon icon-language" aria-hidden="true"></span>
95
    </button>
96
  </div>
97

98
</div>

Figure 1

Figure 1 notes
Lines	Details
1	The `.main-menu--bar--{bp}` block-level selector is required. It accepts two modifiers: the variant (bar or stack) and the responsive breakpoint. At the breakpoint, the component transitions from its mobile layout to the desktop inline layout.
3-10	The `.main-menu__logo` selector is required. It contains the website’s logo and home link. When using a single-color `<svg>` for the logo, the `data-logo="brand"` attribute placed on the `<a>` tag sets the SVG fill color to `currentColor`. This is useful when a theme color utility is present on a parent element.
12-44	The `.main-menu__nav` selector is required. The `id` attribute must match the `aria-controls` value of the associated mobile toggle button found within `.main-menu__toggle`. Include `aria-label` on the `<nav>` tag to provide a descriptive name for assistive technology. Learn about dropdowns.
46-69	The `.main-menu__toggle` selector is required. It contains the mobile toggle buttons for the menu and search. Both are visible on mobile and hidden at the component’s breakpoint. The search toggle button is only needed in the Main Menu Bar. In the Main Menu Stack, the search field remains visible from mobile to desktop. Each button uses `data-toggle="collapse"` and `data-target-close` to mutually dismiss the other panel when opened. Learn about collapse.
71-90	The `.main-menu__search` selector is optional. The `role="search"` attribute on the `<form>` tag is present for assistive technology. The `data-focus-first` attribute moves focus to the search input when the field is revealed. Learn about form entries.
92-96	The `.main-menu__actions` selector is optional. It contains action buttons that should persist on every page (e.g. Sign In, Translate).

The .main-menu--stack--{bp} selector places the main menu below the logo row, spanning the full width of the component. On desktop the logo row displays alongside the search and actions areas. The menu appears beneath on its own full-width row.

Both variants use the same HTML markup and child selectors. The only differences in the stack variant are:

The parent class is .main-menu--stack--{bp} instead of .main-menu--bar--{bp}
The <nav> element is placed last in source order, after the toggle, search, and actions areas
The search toggle button inside .main-menu__toggle is not required — the search field remains visible from mobile to desktop

Main Menu Stack Example

1
<div class="main-menu--stack--lg">
2

3
  <div class="main-menu__logo">
4
    <a href="#1" title="Home" data-logo="brand">
5
      <!-- SVG logo -->
6
    </a>
7
  </div>
8

9
  <div class="main-menu__toggle">
10
    <button
11
      class="button button--icon-only"
12
      aria-label="Menu"
13
      data-toggle="collapse"
14
      aria-controls="main-menu"
15
      aria-expanded="false"
16
      type="button"
17
    >
18
      <span class="icon icon-menu" aria-hidden="true"></span>
19
    </button>
20
  </div>
21

22
  <form class="main-menu__search" role="search">
23
    <!-- Search field -->
24
  </form>
25

26
  <div class="main-menu__actions">
27
    <!-- Action buttons -->
28
  </div>
29

30
  <nav class="main-menu__nav" id="main-menu" aria-label="Main Menu">
31
    <!-- Navigation links -->
32
  </nav>
33
</div>

Figure 2

Figure 2 notes
Lines	Details
1	The `.main-menu--stack--{bp}` selector is the only required change from the bar variant.
30-32	In the stack variant, the `.main-menu__nav` `<nav>` is placed last in source order. The CSS grid layout positions it below the logo row regardless of source order, but placing it last ensures a logical reading order for assistive technology.

Main menu styles can be customized by redefining the related CSS custom properties.

:root {
  --main-menu-padding-x: var(--container-padding-x);
  --main-menu-padding-y: var(--spacer-2);
  --main-menu-search-width: 300px;
}

Figure 3

Custom property	Default	Purpose
`--main-menu-padding-x`	`var(--container-padding-x)`	Left and right padding of the main menu global header.
`--main-menu-padding-y`	`var(--spacer-2)`	Top and bottom padding of the main menu global header.
`--main-menu-search-width`	`300px`	Desktop width of the main menu search area.

No results found for ''

Introduction

Main Menu Bar

Main Menu Stack

Related Custom Properties

Read Next

Dropdown

Navigation

Flyout