Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

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
View RTL
<nord-layout class="n-reset">
<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-icon slot="end" class="n-margin-i-s" name="interface-dropdown-small"></nord-icon>
</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
},
},
]
</script>