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
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>

Properties

PropertyAttributeDescriptionTypeDefault
navOpennav-open

Controls whether the navigation is hidden off-screen or not. Defaults to true for wide viewports, and false otherwise.

booleanundefined
persistNavStatepersist-nav-state

Controls whether the navigation's open/closed state is persisted across page loads. This is useful for multi-page apps, where clicks on links trigger a full page load.

booleanfalse
syncNavStatesync-nav-state

Controls whether the navigation's open/closed state and width is synced across tabs/windows on the same origin. This is useful for long-lived app sessions where you may have multiple tabs/windows open at once.

booleanfalse
paddingpadding

Controls the padding of the default main section slot. When set to “none”, the nav and header slots will still have padding.

"m" | "none""m"
stickysticky

Controls whether the layout's header has sticky positioning.

booleanfalse
stickyFootersticky-footer

Controls whether the layout's footer has sticky positioning.

booleanfalse
isNarrow–

A getter whose values reflects whether the layout component considers the viewport to be narrow or not. A narrow viewport is considered to be less than 768px wide.

booleanundefined

Slots

Slot nameDescription
Default slot

The default main section content.

nav

Used to place content inside the navigation sidebar.

top-bar

Used to place the Top Bar component.

header

Used to place content inside the header section. This slot can be made sticky by utilizing the sticky property on the layout component.

drawer

Used to place additional content/details relating to a selected item.

nav-toggle

Used to place a own nav-toggle component, for cases where you might need to add a tooltip.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-layout-padding

Controls the padding around the main layout area (the main slot), using our spacing tokens.

var(--n-space-l)
--n-layout-drawer-inline-size

Controls the width of the drawer area, when used.

320px
--n-layout-background-color

Controls the background color of the layout, using color tokens.

var(--n-color-background)

Dependencies

This component is internally dependent on the following components:

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do

  • To visually group content in a layout section, use the Card component.
  • To lay out a set of smaller components, use the Stack component.

Don’t

  • Never put layout component inside another HTML landmark.
  • Don’t use when you need a vertical or horizontal layout system. Use Stack component instead.

Additional considerations

  • Layout component uses <main> element internally which is an HTML sectioning element which by default defines an ARIA landmark role. For that reason you should never put layout component inside another HTML landmark.

Theming

Please see the Accent color and Top Bar theming sections in our theming documentation for detailed guidelines.

Theming Guidelines

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Troubleshooting

If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

YesNoSend feedback

We use this feedback to improve our documentation.

Choose therapy brandChoose veterinary brandAbout Nord Design SystemGet support