Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.
We’re hiring frontend developers! View open positions.

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
View RTL
<nord-layout class="n-reset" nav-toggle="toggle-button">
<nord-navigation slot="nav">
<nord-dropdown slot="header" expand>
<nord-button slot="toggle" expand variant="switch">
<span slot="start" aria-hidden="true" class="n-clinic-icon">B</span>
Bath Clinic
<nord-icon slot="end" class="n-margin-i-s" name="interface-dropdown-small" size="s"></nord-icon>
</nord-button>
<nord-dropdown-group heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<span aria-hidden="true" slot="start" class="n-clinic-icon-s">B</span>
Bath Clinic
<nord-icon slot="end" name="interface-checked" size="s"></nord-icon>
</nord-dropdown-item>
<nord-dropdown-item>
<span
aria-hidden="true"
style="--n-clinic-icon-color: var(--n-color-status-success)"
slot="start"
class="n-clinic-icon-s"
>O</span
>

Ocean Beach Clinic
</nord-dropdown-item>
<nord-dropdown-item>
<span
aria-hidden="true"
style="--n-clinic-icon-color: var(--n-color-status-highlight)"
slot="start"
class="n-clinic-icon-s"
>P</span
>

Park Animal Hospital
</nord-dropdown-item>
<nord-dropdown-item>
<span
aria-hidden="true"
style="--n-clinic-icon-color: var(--n-color-status-danger)"
slot="start"
class="n-clinic-icon-s"
>B</span
>

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 class="account-button" slot="toggle" expand variant="plain">
<nord-avatar aria-hidden="true" name="Laura Williams" slot="start"></nord-avatar>
<nord-icon slot="end" name="interface-dropdown-small" size="s"></nord-icon>
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" size="s"></nord-icon>
</nord-dropdown-item>
</nord-dropdown>
</nord-navigation>
<nord-header slot="header">
<nord-button variant="plain" size="s" id="toggle-button" class="nav-toggle" aria-describedby="toggle-tooltip">
<nord-icon color="var(--n-color-icon)" name="navigation-toggle" class="nav-unlock" label="Menu"></nord-icon>
<nord-icon color="var(--n-color-text)" name="navigation-toggle-lock" class="nav-lock"></nord-icon>
</nord-button>
<nord-tooltip id="toggle-tooltip" position="inline-end">
Lock navigation open
<div slot="shortcut">
<nord-icon name="keyboard-option" size="s" label="Alt/Option key"></nord-icon>
</div>
<span slot="shortcut">L</span>
</nord-tooltip>
<h1 class="n-typescale-l">Dashboard</h1>
<nord-button variant="primary" slot="end">
<nord-icon slot="start" size="s" 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>

<style>
.nav-lock {
display: none;
}
@media (min-width: 768px) {
nord-layout[nav-open] .nav-toggle {
display: none;
}
.nav-toggle:hover .nav-lock {
display: block;
}
.nav-toggle:hover .nav-unlock {
display: none;
}
}
.account-button {
--n-button-text-align: start;
--_n-button-padding-inline: calc(var(--n-space-s) / 2);
--_n-button-color: var(--n-color-text-weak);
--_n-button-background-color: transparent;
}
.account-button:hover {
--n-button-border-color: var(--n-color-border-hover);
}
</style>

<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
},
},
]
</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
navTogglenav-toggle

ID reference of element used to toggle the navigation.

string | undefinedundefined
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"

Slots

Slot nameDescription
Default slotThe default main section content.
navUsed to place content inside the navigation sidebar.
headerUsed to place content inside the header section.
drawerUsed to place additional content/details relating to a selected item.

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

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.

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

Localization

Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

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

YesNo
Send feedback

We use this feedback to improve our documentation.