Active theme set to Nord LightNord Dark and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

Layout Ready

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
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"
color="var(--n-color-icon)"
name="interface-dropdown-small"
size="s"
>
</nord-icon>
</nord-button>
<nord-dropdown-group style="min-inline-size: 270px" heading="laura.williams@nordhealth.com">
<nord-dropdown-item>
<span
aria-hidden="true"
slot="start"
style="--n-icon-size: calc(var(--n-size-icon-l) / 1.2)"
class="n-clinic-icon"
>

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-icon-color: var(--n-color-status-success); --n-icon-size: calc(var(--n-size-icon-l) / 1.2)"
slot="start"
class="n-clinic-icon"
>

O
</span>
Ocean Beach Clinic
</nord-dropdown-item>
<nord-dropdown-item>
<span
aria-hidden="true"
style="--n-icon-color: var(--n-color-status-info); --n-icon-size: calc(var(--n-size-icon-l) / 1.2)"
slot="start"
class="n-clinic-icon"
>

P
</span>
Park Animal Hospital
</nord-dropdown-item>
<nord-dropdown-item>
<span
aria-hidden="true"
style="--n-icon-color: var(--n-color-status-danger); --n-icon-size: calc(var(--n-size-icon-l) / 1.2)"
slot="start"
class="n-clinic-icon"
>

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
slot="toggle"
expand
style="
--n-button-text-align: start;
--n-button-color: var(--n-color-text-weak);
--n-button-padding-x: calc(var(--n-space-s) / 2);
--n-button-background-color: transparent;
--n-button-border-color: transparent;
--n-button-box-shadow: transparent;
--n-button-gradient: none;
"

>

<nord-avatar aria-hidden="true" name="Laura Williams" slot="start"></nord-avatar>
<nord-icon slot="end" color="var(--n-color-icon)" name="interface-dropdown-small" size="s"></nord-icon>
Laura Williams
</nord-button>
<nord-dropdown-group style="min-inline-size: 250px">
<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;
}
}
</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

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.

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.