shadcn.io is an independent project built on shadcn/ui
File mixes Save and Print with shortcut hints, an Export submenu for PDF, PNG, and SVG, view checkboxes, an export quality choice, and a Recent Files row.
Use it when one menu has to hold commands, a submenu, toggles, and a single choice. Commands that stay on screen fit a Menubar. In Svelte, Ark UI does not export the file or bind the keys.
Installation
Anatomy
Usage
<DropdownMenu><DropdownMenuTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline"><MenuIcon aria-hidden="true" data-icon="inline-start" />File</Button>{/snippet}</DropdownMenuTrigger><DropdownMenuContent class="w-56"><DropdownMenuGroup><DropdownMenuLabel>File Options</DropdownMenuLabel><DropdownMenuSeparator /><DropdownMenuItem value="save"><SaveIcon aria-hidden="true" />Save<DropdownMenuShortcut>⌘S</DropdownMenuShortcut></DropdownMenuItem><DropdownMenuSub><DropdownMenuSubTrigger><DownloadIcon aria-hidden="true" />Export</DropdownMenuSubTrigger><DropdownMenuSubContent><DropdownMenuItem value="export-as-pdf">Export as PDF</DropdownMenuItem><DropdownMenuItem value="export-as-png">Export as PNG</DropdownMenuItem><DropdownMenuItem value="export-as-svg">Export as SVG</DropdownMenuItem></DropdownMenuSubContent></DropdownMenuSub><DropdownMenuItem value="share"><Share2Icon aria-hidden="true" />Share</DropdownMenuItem><DropdownMenuItem value="print"><PrinterIcon aria-hidden="true" />Print<DropdownMenuShortcut>⌘P</DropdownMenuShortcut></DropdownMenuItem></DropdownMenuGroup><DropdownMenuSeparator /><DropdownMenuGroup><DropdownMenuLabel>View Options</DropdownMenuLabel><DropdownMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid} value="show-grid">Show Grid</DropdownMenuCheckboxItem><DropdownMenuCheckboxItem checked={showRuler} onCheckedChange={setShowRuler} value="show-ruler">Show Ruler</DropdownMenuCheckboxItem></DropdownMenuGroup><DropdownMenuSeparator /><DropdownMenuRadioGroup onValueChange={handleQualityChange} value={quality}><DropdownMenuLabel>Export Quality</DropdownMenuLabel><DropdownMenuRadioItem value="low">Low</DropdownMenuRadioItem><DropdownMenuRadioItem value="medium">Medium</DropdownMenuRadioItem><DropdownMenuRadioItem value="high">High</DropdownMenuRadioItem></DropdownMenuRadioGroup><DropdownMenuSeparator /><DropdownMenuItem value="recent-files"><ClockIcon aria-hidden="true" />Recent Files</DropdownMenuItem></DropdownMenuContent></DropdownMenu>FAQ
What is in the File Options section?
Under its label and a separator: Save (⌘S), the Export submenu, Share and Print (⌘P), all in one DropdownMenuGroup. The menu is w-56.
How is the Export submenu built?
DropdownMenuSub wraps a DropdownMenuSubTrigger, a download icon and the word Export with its own chevron, and a DropdownMenuSubContent with Export as PDF, Export as PNG and Export as SVG. Hover or Arrow Right opens it.
How do Show Grid and Show Ruler work?
Two checkbox rows under a View Options label: Show Grid starts on, Show Ruler off, and each toggles on its own.
Each DropdownMenuCheckboxItem takes checked, onCheckedChange, which receives a boolean, and a value.
API Reference
Dropdown Menu
Sets value="save", value="export-as-pdf", value="export-as-png", value="export-as-svg", value="share" and value="print". The rest is on the Dropdown Menu page.
Button
Sets props and variant="outline". The rest is on the Button page.
