Skip to content

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

Free

Navigation with User Profile Sheet for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not know who is signed in.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Sheet>
  <SheetTrigger :asChild="true"><Button variant="outline">Menu</Button></SheetTrigger>
  <SheetContent side="left">
    <SheetHeader><SheetTitle>Menu</SheetTitle></SheetHeader>
    <div class="flex flex-col gap-4 p-4">
      <div class="flex items-center gap-3 rounded-md bg-muted p-3">
        <Avatar>
          <AvatarFallback class="bg-primary text-primary-foreground">
            JD
          </AvatarFallback>
        </Avatar>
        <div class="flex flex-col">
          <span class="font-medium text-sm">John Doe</span>
          <span class="text-muted-foreground text-xs">john@example.com</span>
        </div>
      </div>
      <nav class="flex flex-col gap-2">
        <a
          v-for="link in LINKS"
          class="font-medium text-sm hover:underline"
          href="#"
          :key="link"
        >
          {{ link }}
        </a>
      </nav>
    </div>
  </SheetContent>
</Sheet>

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 and listen to @open-change, which receives details.open.

How does the Menu button open the sheet?

The outline button labeled Menu is the trigger, and its text is the accessible name. SheetTrigger takes asChild and merges onto the one Button inside it.

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 asChild and 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