Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Navigation with User Profile Sheet for React

A Menu button opens a left-side sheet showing John Doe, his email, and links for Dashboard, Projects, Settings, and Sign Out.

The sheet is titled Menu. A card shows the initials JD, John Doe, and john@example.com, then Dashboard, Projects, Settings, and Sign Out.

Use it when people should see the account before they navigate. Confirm Sign Out in an Alert Dialog if it ends the session immediately. In React, Base UI does not know who is signed in.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>Menu</SheetTrigger>
  <SheetContent side="left">
    <SheetHeader>
      <SheetTitle>Menu</SheetTitle>
    </SheetHeader>
    <div className="flex flex-col gap-4 p-4">
      <div className="flex items-center gap-3 rounded-md bg-muted p-3">
        <Avatar>
          <AvatarFallback className="bg-primary text-primary-foreground">
            JD
          </AvatarFallback>
        </Avatar>
        <div className="flex flex-col">
          <span className="font-medium text-sm">John Doe</span>
          <span className="text-muted-foreground text-xs">
            john@example.com
          </span>
        </div>
      </div>
      <nav className="flex flex-col gap-2">
        {LINKS.map((link) => (
          <a
            className="font-medium text-sm hover:underline"
            href="#"
            key={link}
          >
            {link}
          </a>
        ))}
      </nav>
{/* The rest of the file is under Installation. */}

FAQ

How is the profile card built?

A muted, rounded row with an Avatar showing JD in its AvatarFallback, the name John Doe and the email john@example.com. Add an AvatarImage to show a photo.

Should Sign Out be a link?

Only if your sign-out is a page. If it calls an API, make it a button so it isn't opened in a new tab or prefetched, and send people to the sign-in page afterwards.

Does the sheet close when a link is clicked?

Links in a sheet don't close it. When a link changes the page, close the sheet in its click handler, or let your router's navigation unmount it. To close it from code, control the open state: Pass open to Sheet; onOpenChange receives the next boolean.

How does the Menu button open the sheet?

The outline button labeled Menu is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

Which edge does the menu use?

side="left" on SheetContent slides the panel in from the left, where people look for a menu. It fills the height and caps its width from the sm breakpoint.

API Reference

Sheet

Sets side="left". The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

Avatar

No extra props in this demo. The rest is on the Avatar page.

All 29 sheet examples