SeparatorMenu() — ui Function Reference

Architecture documentation for the SeparatorMenu() function in separator-menu.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ SeparatorMenu() — ui Function Reference

Dependency Diagram

graph TD
  adc398af_168d_774e_2035_9676286ab389["SeparatorMenu()"]
  93ce79aa_a62f_9888_ce12_2376b17dc362["separator-menu.tsx"]
  adc398af_168d_774e_2035_9676286ab389 -->|defined in| 93ce79aa_a62f_9888_ce12_2376b17dc362
  style adc398af_168d_774e_2035_9676286ab389 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/separator-menu.tsx lines 3–26

export function SeparatorMenu() {
  return (
    <div className="flex items-center gap-2 text-sm md:gap-4">
      <div className="flex flex-col gap-1">
        <span className="font-medium">Settings</span>
        <span className="text-muted-foreground text-xs">
          Manage preferences
        </span>
      </div>
      <Separator orientation="vertical" />
      <div className="flex flex-col gap-1">
        <span className="font-medium">Account</span>
        <span className="text-muted-foreground text-xs">
          Profile & security
        </span>
      </div>
      <Separator orientation="vertical" className="hidden md:block" />
      <div className="hidden flex-col gap-1 md:flex">
        <span className="font-medium">Help</span>
        <span className="text-muted-foreground text-xs">Support & docs</span>
      </div>
    </div>
  )
}