Controls

NavigationDrawer

The phone navigation sheet that rises from the bottom and closes itself at 768px.

import { NavigationDrawer, NavigationDrawerTrigger, NavigationDrawerPopup } from '@iffday/ui';

Example

On phones the site keeps its main navigation in this sheet. It rises from the bottom, takes at most 86% of the screen height and dims the page. It is a Base UI Dialog, so focus, Escape, a tap on the backdrop and the scroll lock behave as in a dialog. Once the window reaches 768px the sheet closes, because the header then has room for the navigation.

Open it in a narrow window, or open it and widen the window to watch it close. This site’s menu on phones is the same component.

import { useT } from '@iffday/i18n';
import { NavigationDrawer, NavigationDrawerPopup, NavigationDrawerTrigger } from '@iffday/ui';
import { NavLink } from '@iffday/web/src/router';
import { Menu } from 'lucide-react';
import { useState } from 'react';

export default function Example() {
  const t = useT();
  const [open, setOpen] = useState(false);
  return (
    <NavigationDrawer open={open} onOpenChange={setOpen}>
      <NavigationDrawerTrigger className="button" aria-label={t('nav.openNavigation')}>
        <Menu size={18} />
        {t('nav.navigation')}
      </NavigationDrawerTrigger>
      <NavigationDrawerPopup>
        <nav aria-label={t('nav.mainNavigation')} style={{ display: 'grid', gap: 4 }}>
          <NavLink
            className="button neutral"
            to="/components/button"
            onClick={() => setOpen(false)}
          >
            Button
          </NavLink>
          <NavLink
            className="button neutral"
            to="/components/dialog"
            onClick={() => setOpen(false)}
          >
            Dialog
          </NavLink>
          <NavLink className="button neutral" to="/components/menu" onClick={() => setOpen(false)}>
            Menu
          </NavLink>
        </nav>
      </NavigationDrawerPopup>
    </NavigationDrawer>
  );
}

Usage

NavigationDrawer wraps the trigger and the sheet. NavigationDrawerPopup brings a hidden Navigation title and a close button. After a link in the sheet is followed, set open back to false.

Props

NavigationDrawer

packages/ui/src/navigation.tsx:6

Dialog owns mobile focus, Escape, outside press, scroll lock and focus return.

Prop	Type	Default
`open*`	`boolean`
`onOpenChange*`	`(open: boolean) => void`
`children*`	`ReactNode`

NavigationDrawerTrigger

packages/ui/src/navigation.tsx:30

Exports BaseDialog.Trigger as it is, with Base UI’s props (see the Base UI documentation).

NavigationDrawerPopup

packages/ui/src/navigation.tsx:31

Prop	Type	Default
`children*`	`ReactNode`