Aside New

Usage

Aside is the container for the app shell's right-side rail + drawer pattern. A persistent rail of Aside Trigger buttons sits against the edge of the screen, and each one opens an Aside Drawer panel of secondary content next to the main view.

Import the parts you need — each import registers its custom element:

import "@nordhealth/components/lib/Aside"
import "@nordhealth/components/lib/AsideDrawer"
import "@nordhealth/components/lib/AsideTrigger"

Then compose the triggers in the rail slot and the drawers in the default slot:

Composition

Aside lays out a fixed-width rail and, when a drawer is active, a resizable drawer panel beside it. The active-drawer attribute holds the id of the open drawer (empty closes them all), so a trigger, its drawer and the container stay in sync.

Aside
├── rail (slot)
│   └── AsideTrigger        (one per drawer, toggles it)
└── AsideDrawer             (one or more panels, default slot)
    └── Drawer content

<nord-aside active-drawer="details">
  <nord-aside-trigger slot="rail" drawer="details" icon="interface-info" label="Details"></nord-aside-trigger>
  <nord-aside-trigger slot="rail" drawer="activity" icon="interface-time" label="Activity"></nord-aside-trigger>

  <nord-aside-drawer id="details">
    <!-- drawer content -->
  </nord-aside-drawer>
  <nord-aside-drawer id="activity">
    <!-- drawer content -->
  </nord-aside-drawer>
</nord-aside>

Aside

Aside owns the layout and the open state. Set active-drawer to the id of the drawer to show (or "" to close), tune the rail with rail-width and rail-gap, and choose what the resize handle does with handle-click (toggle, close or none). It emits active-drawer-change, drawer-open, drawer-close, drawer-resize and handle-mode-change so your app can react to or persist the state.

Aside Drawer

Aside Drawer is a panel of content shown beside the rail. Give each one a unique id that its trigger and the container's active-drawer reference. It is resizable between min-width and max-width (starting at default-width), can expand to fullscreen, and emits width-change as it resizes.

Aside Trigger

Aside Trigger is a rail button that toggles a drawer. Point drawer at the target drawer's id, give it an icon and a label (used as the accessible name and the hover tooltip), and optionally a badge. Place it in the container's rail slot.

A trigger can also act as a navigation link: set href (with optional target and rel) instead of drawer, and it renders a real anchor — so a rail can mix drawer toggles and page links with the same look. drawer and href are mutually exclusive; when both are set, href wins.

<nord-aside>
  <!-- opens a drawer -->
  <nord-aside-trigger slot="rail" drawer="chat" icon="interface-chat" label="Chat"></nord-aside-trigger>
  <!-- navigates like a link -->
  <nord-aside-trigger slot="rail" href="/notifications" icon="navigation-notifications" label="Notifications"></nord-aside-trigger>

  <nord-aside-drawer id="chat">
    <!-- drawer content -->
  </nord-aside-drawer>
</nord-aside>

Examples

Rail collapse layout

Embedded in an app shell, the rail tucks against the edge of the layout and the active drawer opens beside the main content.

Multiple drawers

Add a trigger and a drawer per panel. Opening one drawer closes the others, since only one active-drawer is open at a time.

Badges and disabled triggers

A trigger can carry a badge to flag new or pending content, and be disabled when its drawer isn't available.

Resizable drawers

Drag the handle between the drawer and the main view to resize it between its min-width and max-width; arrow keys nudge it while the handle is focused.

Fullscreen

A drawer can expand to fill the available space for focused, content-heavy tasks.

Accessibility

• Give every Aside Trigger a label. It becomes the button's accessible name and its hover tooltip, so the icon-only rail is understandable to assistive technology.
• The container reflects each drawer's open state with aria-expanded on its trigger, so screen reader users hear whether a panel is open or closed.
• A trigger's badge is decorative; convey the same information in the drawer's content or the trigger's label so it isn't lost to assistive technology.
• The resize handle is keyboard operable — it is focusable and responds to the arrow keys — so a drawer can be resized without a pointer.