LayoutReady

Layout component is used to create the main layout of an app. Layout currently comes with one main configuration: two-column.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-layout>
  <nord-navigation slot="nav">
    <nord-dropdown slot="header" expand>
      <nord-button slot="toggle" expand>
        <nord-avatar slot="start" name="Bath Clinic" variant="square">B</nord-avatar>
        Bath Clinic
      </nord-button>
      <nord-dropdown-group heading="laura.williams@nordhealth.com">
        <nord-dropdown-item>
          <nord-avatar slot="start" name="Bath Clinic" size="s" variant="square">B</nord-avatar>
          Bath Clinic
          <nord-icon slot="end" name="interface-checked"></nord-icon>
        </nord-dropdown-item>
        <nord-dropdown-item>
          <nord-avatar
            slot="start"
            name="Ocean Beach Clinic"
            size="s"
            variant="square"
            style="--n-avatar-color: var(--n-color-status-success)"
          >
            O
          </nord-avatar>
          Ocean Beach Clinic
        </nord-dropdown-item>
        <nord-dropdown-item>
          <nord-avatar
            slot="start"
            name="Park Animal Hospital"
            size="s"
            variant="square"
            style="--n-avatar-color: var(--n-color-status-highlight)"
          >
            P
          </nord-avatar>
          Park Animal Hospital
        </nord-dropdown-item>
        <nord-dropdown-item>
          <nord-avatar
            slot="start"
            name="Balboa Pet Hospital"
            size="s"
            variant="square"
            style="--n-avatar-color: var(--n-color-status-danger)"
          >
            B
          </nord-avatar>
          Balboa Pet Hospital
        </nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-group>
        <nord-dropdown-item>Add another clinic</nord-dropdown-item>
        <nord-dropdown-item>Customize style</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-item>Sign out from all clinics</nord-dropdown-item>
    </nord-dropdown>
    <nord-nav-group heading="Workspace">
      <nord-nav-item href="#" active icon="navigation-dashboard">Dashboard</nord-nav-item>
      <nord-nav-item icon="navigation-payments">
        Payments
        <nord-nav-group slot="subnav">
          <nord-nav-item href="#">All transactions</nord-nav-item>
          <nord-nav-item href="#">Payments</nord-nav-item>
          <nord-nav-item href="#">Disputes</nord-nav-item>
        </nord-nav-group>
      </nord-nav-item>
      <nord-nav-item icon="navigation-reports">
        Reports
        <nord-nav-group slot="subnav">
          <nord-nav-item href="#">Payments</nord-nav-item>
          <nord-nav-item href="#">Disputes</nord-nav-item>
          <nord-nav-item href="#">Payouts</nord-nav-item>
        </nord-nav-group>
      </nord-nav-item>
      <nord-nav-item href="#" icon="navigation-settings">Settings</nord-nav-item>
    </nord-nav-group>
    <nord-dropdown expand slot="footer">
      <nord-button slot="toggle" expand>
        <nord-avatar slot="start" aria-hidden="true" name="Laura Williams"></nord-avatar>
        Laura Williams
      </nord-button>
      <nord-dropdown-group>
        <nord-dropdown-item href="#">View profile</nord-dropdown-item>
        <nord-dropdown-item>Settings</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-group>
        <nord-dropdown-item>
          Show keyboard shortcuts
          <div slot="end" class="n-color-text-weaker n-font-size-xs">Cmd+K</div>
        </nord-dropdown-item>
        <nord-dropdown-item>Help & Support</nord-dropdown-item>
        <nord-dropdown-item>API</nord-dropdown-item>
      </nord-dropdown-group>
      <nord-dropdown-item>
        Sign out
        <nord-icon slot="end" name="interface-logout"></nord-icon>
      </nord-dropdown-item>
    </nord-dropdown>
  </nord-navigation>
  <nord-header slot="header">
    <h1 class="n-typescale-l">Dashboard</h1>
    <nord-button variant="primary" slot="end">
      <nord-icon slot="start" name="interface-add-small"></nord-icon>
      Create new
    </nord-button>
    <nord-tooltip id="export" position="block-end"> Export data as Spreadsheet </nord-tooltip>
  </nord-header>
  <nord-stack gap="l">
    <nord-card>
      <h2 slot="header">Card heading</h2>
      <nord-banner variant="success">
        Your order has been shipped and will arrive on May 27th. <a href="#">Track order</a>.
      </nord-banner>
    </nord-card>
  </nord-stack>
</nord-layout>
<nord-command-menu></nord-command-menu>

<script>
  const layout = document.querySelector("nord-layout")
  const commandMenu = document.querySelector("nord-command-menu")
  commandMenu.commands = [
    {
      id: "toggle-nav",
      title: "Toggle navigation",
      icon: "navigation-toggle",
      shortcut: "Alt+KeyL",
      handler() {
        layout.navOpen = !layout.navOpen
      },
    },
  ]

  const navigation = document.querySelector("nord-navigation")

  // for demo purposes, activate nav items on click.
  // in most cases you should instead integrate with your chosen router
  navigation.addEventListener("click", e => {
    if (e.target.matches("nord-nav-item") && e.target.href) {
      e.target.active = true
    }
  })
</script>