Flyout • Natura11y Design Ecosystem

The flyout is a full-height overlay panel that slides in from the side. A trigger button placed anywhere on the page opens it; a close button inside the panel dismisses it.

The flyout body accepts any content — navigation, a shopping cart, filters, and more. For multi-level navigation, it also supports a drill-down panel system that lets users move deeper into a hierarchy and back out again.

The flyout is made up of two parts: a trigger placed anywhere on the page, and the flyout panel itself. The trigger uses data-open="flyout" and aria-controls to reference the flyout by id.

Figure 1 shows the complete HTML, including the trigger button and all required selectors.

9:41

1
      <!-- Trigger button -->
2

3
      <button
4
          class="button button--icon-only"
5
          data-open="flyout"
6
          aria-controls="flyout-menu"
7
          aria-label="Open Menu"
8
      >
9
          <span class="icon icon-menu" aria-hidden="true"></span>
10
      </button>
11

12
      <!-- Flyout menu -->
13

14
      <div
15
          class="flyout"
16
          id="flyout-menu"
17
          aria-hidden="true"
18
      >
19

20
          <div
21
              class="flyout__content"
22
              role="dialog"
23
              aria-modal="true"
24
              aria-label="Main Menu"
25
          >
26

27
              <div class="flyout__header">
28
                  <button
29
                      class="button button--icon-only font-size-md"
30
                      data-flyout-close
31
                      aria-label="Close Menu"
32
                  >
33
                      <span class="icon icon-close" aria-hidden="true"></span>
34
                  </button>
35
              </div>
36

37
              <nav class="flyout__body" aria-label="Main Menu Navigation">
38
                  <ul class="nav nav--divider">
39
                      <li><a href="#1">Home</a></li>
40
                      <li><a href="#1">Trails</a></li>
41
                      <li><a href="#1">Wildlife</a></li>
42
                      <li><a href="#1">Events</a></li>
43
                      <li><a href="#1">About</a></li>
44
                      <li><a href="#1">Contact</a></li>
45
                  </ul>
46
              </nav>
47

48
          </div>
49
      </div>

Figure 1

Figure 1 notes
Lines	Details
3-10	A button with `data-open="flyout"` opens the flyout menu. The `aria-controls` attribute equals the `id` of the associated `.flyout` element.
14-18	The `.flyout` selector is required. It acts as the full-screen backdrop. `aria-hidden="true"` is present by default. It becomes `aria-hidden="false"` when the menu opens.
20-25	The `.flyout__content` selector is required. It holds all menu content and slides in from the side. `role="dialog"` and `aria-modal="true"` are required for assistive technology. `aria-label` provides the accessible name for the dialog.
27-35	The `.flyout__header` selector is required. The button with `data-flyout-close` closes the menu. Place it inside `.flyout__header`.
37-46	The `.flyout__body` selector is required. It scrolls vertically when content exceeds the viewport height. Place any content here — navigation, a shopping cart, filters, or anything that suits an off-canvas panel.

For multi-level navigation, place panels inside .flyout__panels. Each .flyout__panel holds one level of navigation. Buttons with data-flyout-next drill forward into sub-panels. A back button appears in the header once the user navigates deeper.

The optional .flyout__panel-title selector labels the current sub-panel to help orient the user.

9:41

1
      <div class="flyout__header">
2
          <button
3
              class="button button--icon-only font-size-md"
4
              data-flyout-back
5
              aria-label="Back"
6
              type="button"
7
              hidden
8
          >
9
              <span class="icon icon-arrow-left" aria-hidden="true"></span>
10
          </button>
11
      </div>
12

13
      <nav class="flyout__body" aria-label="Main Menu Navigation">
14

15
          <div class="flyout__panels">
16

17
              <!-- Panel 0: Root (active) -->
18
              <div class="flyout__panel">
19
                  <ul class="nav nav--divider">
20
                      <li>
21
                          <button data-flyout-next aria-controls="panel-wildlife">
22
                              Wildlife
23
                              <span class="icon icon-arrow-right" aria-hidden="true"></span>
24
                          </button>
25
                      </li>
26
                      <li>
27
                          <button data-flyout-next aria-controls="panel-trails">
28
                              Trails
29
                              <span class="icon icon-arrow-right" aria-hidden="true"></span>
30
                          </button>
31
                      </li>
32
                      <li><a href="#1">Events</a></li>
33
                      <li><a href="#1">About</a></li>
34
                      <li><a href="#1">Contact</a></li>
35
                  </ul>
36
              </div>
37

38
              <!-- Panel 1: Wildlife -->
39
              <div class="flyout__panel" id="panel-wildlife">
40
                  <div class="flyout__panel-title">
41
                      <p>Wildlife</p>
42
                  </div>
43
                  <ul class="nav nav--divider">
44
                      <li><a href="#1">Birds</a></li>
45
                      <li><a href="#1">Mammals</a></li>
46
                      <li><a href="#1">Reptiles</a></li>
47
                      <li><a href="#1">All Wildlife</a></li>
48
                  </ul>
49
              </div>
50

51
          </div>
52

53
      </nav>

Figure 2

Figure 2 notes
Lines	Details
2-10	The button with `data-flyout-back` is hidden by default. JavaScript reveals it after the user drills into a sub-panel.
15	The `.flyout__panels` selector is required for drill-down navigation. It wraps all panels and positions them as a stack.
18-36	Each `.flyout__panel` holds one level of navigation. The first panel is active by default. Buttons with `data-flyout-next` and `aria-controls` navigate forward to the target sub-panel. The arrow icon is a visual affordance indicating the button drills deeper.
39-49	Sub-panels follow the same `.flyout__panel` pattern. The `.flyout__panel-title` wraps a `<p>` to label the current sub-panel context for the user. JavaScript keeps inactive panels out of keyboard focus.

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

:root {
  --flyout-width: min(360px, 85dvw);
  --flyout-z-index: 10000;
}

Figure 3

Custom property	Default	Purpose
`--flyout-width`	`min(360px, 85dvw)`	Width of the flyout content panel.
`--flyout-z-index`	`10000`	Stacking order of the flyout overlay.

No results found for ''

Introduction

The Flyout

Drill-Down Navigation

Related Custom Properties

Read Next

Main Menu

Navigation

Accessibility