Drawer

A panel attached to one edge of the window. It either floats over the page and is dismissed, or sits in the layout as a fixed sidebar: the same panel either way.

import { Button, Drawer } from 'neba';

<Drawer trigger={<Button variant="outline">Open navigation</Button>} title="Workspace">
  <List>…</List>
</Drawer>;

Props

Prop	Type	Default	Description
locale	string	—	BCP 47 tag naming the × in that language. Unsupported tags fall back to English
side	'top' | 'right' | 'bottom' | 'left'	'left'	Which edge of the window the panel is attached to. Physical, as NebaSide is everywhere
mode	'overlay' | 'inline'	'overlay'	overlay floats on a scrim, holds focus and is dismissed. inline is part of the layout: no scrim, no portal, nothing to dismiss
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The type scale, the padding, and a side panel's default width
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. The sheet is never dyed, so it reaches the edge and the focus ring
densityshared	'default' | 'compact'	'default'	Padding only
open	boolean	—	Whether it is shown. With onOpenChange, a controlled drawer. In inline mode it is whether the panel is in the layout
defaultOpen	boolean	—	The initial state of an uncontrolled drawer. false in overlay mode, true in inline mode: a fixed sidebar that had to be opened would not be fixed
onOpenChange	(open: boolean) => void	—	Called when it opens or closes
trigger	ReactElement	—	The element that opens it, wired up by Base UI. overlay only: an inline drawer has nothing to open, so it is not rendered
title	ReactNode	—	The heading. Rendered as the element that names the drawer
description	ReactNode	—	A line under the title, and the drawer's accessible description
actions	ReactNode	—	The bottom row, held against the foot of the panel and end-aligned. DrawerClose is what makes one of them dismiss
dividers	boolean	false	Separates the sections with hairlines instead of space. Worth turning on the moment the body scrolls
showClose	boolean	—	The × in the corner. On in overlay mode, off in inline mode: a × that closes a fixed sidebar with nothing to reopen it is a one-way door
closeLabel	string	—	Accessible name of the × button
extent	number | string	—	How far the panel reaches in from its edge: a width for left and right, a height for top and bottom. Numbers are pixels
rounded	boolean	true	Cuts the two corners on the edge that faces the page. The corners against the window edge are always square
modal	boolean | 'trap-focus'	true	Whether the page behind is taken away. trap-focus keeps it scrollable and clickable while holding focus inside. overlay only
dismissible	boolean	true	Whether Escape or a click on the scrim closes it. overlay only
children	ReactNode	—	The body: the only part that scrolls

Native <div> attributes pass through to the panel. Only color, title and children are excluded, since the table above spells them differently.

DrawerClose is Base UI's Dialog.Close, re-exported. Give it a render prop and any element dismisses the drawer it is inside: <DrawerClose render={<Button>Cancel</Button>} />. It belongs to an overlay drawer: an inline one is not a dialog.

The shared axes are described in prop conventions.

Examples

side

side is the edge the panel is attached to. left and right take a width from the size ladder and fill the height; top and bottom fill the width and are as tall as their content, up to 85% of the window.

import { Button, Drawer, type NebaSide } from 'neba';

const SIDES: NebaSide[] = ['left', 'right', 'top', 'bottom'];

export default function DrawerSides() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {SIDES.map((side) => (
        <Drawer
          key={side}
          side={side}
          trigger={
            <Button variant="outline" color="secondary">
              {side}
            </Button>
          }
          title={`Attached to the ${side}`}
          description="The corners on the free edge are cut; the ones against the window stay square."
        >
          A side panel takes the width its size implies. A top or bottom panel is as tall as what is
          in it, up to 85% of the window.
        </Drawer>
      ))}
    </div>
  );
}

mode

overlay, the default, is the drawer you open: a scrim, a focus trap, Escape, and focus returned to the trigger. inline puts the same panel in the layout (no scrim, no portal, nothing to dismiss), and open decides whether it is in the flow at all. It defaults to open, so a fixed sidebar needs no state.

Because it is one component, a sidebar that becomes a hamburger at a breakpoint is a mode that changes rather than two components to swap between.

import { useState } from 'react';
import { Button, Drawer, List, ListItem } from 'neba';

export default function DrawerInline() {
  const [open, setOpen] = useState(true);

  return (
    <div className="flex h-64 w-full overflow-hidden rounded-xl border border-[var(--n-line)]">
      <Drawer
        mode="inline"
        open={open}
        onOpenChange={setOpen}
        showClose
        title="Projects"
        extent={200}
      >
        <List density="compact">
          <ListItem>neba</ListItem>
          <ListItem>docs-site</ListItem>
          <ListItem>api-gateway</ListItem>
        </List>
      </Drawer>

      <div className="flex flex-1 flex-col items-start gap-3 p-4">
        <p className="m-0 text-[0.8125rem] text-(--neba-muted-fg)">
          The page is laid out around an inline drawer rather than under it. Closing it takes it out
          of the flow.
        </p>
        <Button size="sm" variant="outline" onClick={() => setOpen((value) => !value)}>
          {open ? 'Collapse the sidebar' : 'Show the sidebar'}
        </Button>
      </div>
    </div>
  );
}

rounded

rounded cuts the two corners on the edge facing the page: the top and bottom of a side panel, the inner pair of a top or bottom one. The corners against the window edge stay square. Turn it off for a panel that should read as an extension of the window.

import { Button, Drawer } from 'neba';

export default function DrawerRounded() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Drawer
        side="bottom"
        size="lg"
        trigger={<Button variant="outline">Rounded</Button>}
        title="Cut corners"
      >
        The two corners facing the page are cut to the size step of the radius ladder.
      </Drawer>

      <Drawer
        side="bottom"
        size="lg"
        rounded={false}
        trigger={
          <Button variant="outline" color="secondary">
            Square
          </Button>
        }
        title="Square corners"
      >
        Every corner is square, for a panel that should read as an extension of the window rather
        than a sheet laid over it.
      </Drawer>
    </div>
  );
}

dividers and scrolling

The body is the only part that scrolls, so title, description and actions stay put. dividers replaces the space between the sections with hairlines, which is what says the header did not move.

import { Button, Drawer, DrawerClose, List, ListItem } from 'neba';

const REGIONS = [
  'us-east-1',
  'us-west-2',
  'eu-west-1',
  'eu-central-1',
  'ap-northeast-1',
  'ap-northeast-2',
  'ap-southeast-1',
  'ap-southeast-2',
  'sa-east-1',
  'af-south-1',
  'me-south-1',
  'ca-central-1'
];

export default function DrawerScrolling() {
  return (
    <Drawer
      side="right"
      dividers
      trigger={<Button variant="outline">Pick a region</Button>}
      title="Regions"
      description="The header and the actions stay put; only the body scrolls."
      actions={
        <>
          <DrawerClose
            render={
              <Button variant="text" color="secondary">
                Cancel
              </Button>
            }
          />
          <DrawerClose render={<Button>Apply</Button>} />
        </>
      }
    >
      <List>
        {REGIONS.map((region) => (
          <ListItem key={region}>{region}</ListItem>
        ))}
      </List>
    </Drawer>
  );
}

extent

extent is how far the panel reaches in from its edge: a width for left and right, a height for top and bottom. Numbers are pixels, strings are CSS lengths. Left alone, a side panel takes the width its size implies.

<Drawer side="right" extent={420} title="Details" />
<Drawer side="bottom" extent="50vh" title="Filters" />

Accessibility

• In overlay mode the panel is a modal dialog: focus is trapped inside, the page behind goes inert, Escape closes it and focus returns to the trigger.
• title names the drawer and description describes it, wired with aria-labelledby and aria-describedby. A drawer with neither needs an aria-label of its own.
• modal="trap-focus" keeps the page scrollable and clickable while still holding focus inside.
• dismissible={false} cancels Escape and the click on the scrim. Give that drawer actions that close it, because there will be no other way out.
• An inline drawer is not a dialog: it takes no focus, traps nothing, and announces nothing. Its title is a plain heading, so put it in the page's heading order.
• locale decides the ×'s accessible name; closeLabel writes it out instead.