Navigation

Vertical navigation for settings columns, progress bars and steps for multi-stage flows, and the command palette — press ⌘K anywhere on this page, or click the button. The palette pairs the dialog controller with a palette controller for filtering and arrow keys.

Vertical navigation

With sections

Progress bars & steps

Progress bar

Migrating device records… 62%

Bullets and text

Step 3 of 4

Circles with connectors

3 4

Circles with text

Create the site

Name, address, timezone

Connect the database

SQL Server credentials verified

3

Pair controllers

2 of 6 controllers online

4

Invite operators

Give your team access

Panels

Job details
02 Schedule
03 Confirm

Command palette

⌘K

Sites

Devices

Actions

↑↓ navigate ↵ select esc close 
<div data-controller="dialog"
     data-action="keydown.meta+k@window->dialog#open">
  <dialog class="modal palette" data-dialog-target="dialog" data-controller="palette"
          data-action="click->dialog#backdropClose keydown.esc->dialog#close">
    <input class="palette-input" data-palette-target="input"
           data-action="input->palette#filter keydown.down->palette#next
                        keydown.up->palette#previous keydown.enter->palette#select">
    <div class="palette-list">
      <div data-palette-target="group">
        <p class="palette-group-label">Sites</p>
        <button class="palette-item" data-palette-target="item">…</button>
      </div>
    </div>
  </dialog>
</div>