Overview
SettingsToggleMenuItem is a unified drop-in component for DropdownMenu that handles user preference toggles. It manages state internally via context providers and persists preferences. Use the type prop to specify which toggle to render.
Toggle Types
- type="theme" - Toggle dark/light mode
- type="layout" - Toggle centered/full-width layout
Examples
Combined Usage
Both toggle types together in a dropdown menu.
type="theme"
Toggle between dark and light mode. Click to see it change.
type="layout"
Toggle between centered and full-width content layout.
Props Reference
SettingsToggleMenuItemProps
| Prop | Type | Default | Description |
|---|---|---|---|
type | "theme" | "layout" | required | Which preference toggle to render |
Required Providers by Type
| Prop | Type | Description |
|---|---|---|
theme | useTheme() | Requires ThemeProvider in root layout |
layout | useMaximizedSpace() | Requires MaximizedSpaceProvider in root layout |
Usage
import { SettingsToggleMenuItem } from '@/ui/components';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuTrigger,
DropdownMenuSeparator,
DropdownMenuItem,
} from '@/ui/primitives';
// Typically used in TopBar user menu
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost">
<UserAvatar user={user} />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
{/* Settings toggles */}
<SettingsToggleMenuItem type="theme" />
<SettingsToggleMenuItem type="layout" />
<DropdownMenuSeparator />
{/* Other menu items */}
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>