Signature

Full-screen menu

The portfolio's full-screen menu: a modal of large cells; hovering or focusing a cell dissolves it to the ink color while its label rolls up. Built on a native <dialog> (focus trap, Escape, top layer), with links inside a <nav>.

demos/full-screen-menu.tsx

import { Button } from "pixelbits/button";
import { FullScreenMenu } from "pixelbits/full-screen-menu";

export default function Demo() {
  return (
    <FullScreenMenu
      trigger={<Button>Open menu</Button>}
      brand={
        <span className="text-sm font-medium">
          pixel<span className="font-light">bits</span>
        </span>
      }
      links={[
        { label: "Work", href: "#work", description: "Selected projects" },
        { label: "Studio", href: "#studio" },
        { label: "Journal", href: "#journal" },
        { label: "Contact", href: "#contact" },
      ]}
      footer="hello@pixelbits.dev"
    />
  );
}

Installation

npm: import

import { FullScreenMenu } from "pixelbits/full-screen-menu";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/full-screen-menu.json

API

<FullScreenMenu>

Example

<FullScreenMenu
  trigger={<Button size="sm">Menu</Button>}
  brand={<Logo />}
  links={[{ label: "Work", href: "/work" }, { label: "Studio", href: "/studio" }]}
/>

Prop	Type	Default	Description
links*	MenuLink[]	—	The destinations, shown as large cells in a grid.
trigger*	ReactElement	—	The element that opens the menu, usually a `Button` ("Menu").
open	boolean	—	Whether it is open (controlled).
defaultOpen	boolean	false	Open on first render (uncontrolled).
onOpenChange	(open: boolean) => void	—	Called when it opens or closes.
brand	ReactNode	—	Content of the top bar on the start side, usually the logo.
footer	ReactNode	—	Content under the grid: contact details, social links.
columns	1 \| 2 \| 3	2	Cells per row on wide screens (one per row on phones).
renderLink	(link: MenuLink, props: { className: string	—	Render links with your router's component, e.g. `(link, props) => <NextLink href={link.href} {...props} />`.
label	string	"Menu"	Accessible name of the menu dialog.
className	string	—	Extra classes for the root element.