SaladUI

Menu

Render menu

Read more Read less

Examples:

<.menu>
  <.menu_label>Account</.menu_label>
  <.menu_separator />
  <.menu_group>
    <.menu_item>
        Profile
      <.menu_shortcut>⌘P</.menu_shortcut>
    </.menu_item>
    <.menu_item>
        Billing
      <.menu_shortcut>⌘B</.menu_shortcut>
    </.menu_item>
    <.menu_item>
        Settings
      <.menu_shortcut>⌘S</.menu_shortcut>
    </.menu_item>
  </.menu_group>
</.menu>
Account
Profile ⌘P
Billing ⌘B
Settings ⌘S
Team
New team ⌘T
Attribute Type Documentation Default Value
class :string "top-0 left-full"
rest :global
Required inner_block * :slot 
<.menu_label>Account</.menu_label>
<.menu_separator />
<.menu_group>
  <.menu_item>
    <.icon name="hero-user" class="mr-2 h-4 w-4" />
    <span>Profile</span>
    <.menu_shortcut>⌘P</.menu_shortcut>
  </.menu_item>
  <.menu_item>
    <.icon name="hero-banknotes" class="mr-2 h-4 w-4" />
    <span>Billing</span>
    <.menu_shortcut>⌘B</.menu_shortcut>
  </.menu_item>
  <.menu_item>
    <.icon name="hero-cog-6-tooth" class="mr-2 h-4 w-4" />
    <span>Settings</span>
    <.menu_shortcut>⌘S</.menu_shortcut>
  </.menu_item>
</.menu_group>
<.menu_separator />
<.menu_group>
  <.menu_item>
    <.icon name="hero-users" class="mr-2 h-4 w-4" />
    <span>Team</span>
  </.menu_item>
  <.menu_item disabled>
    <.icon name="hero-plus" class="mr-2 h-4 w-4" />
    <span>New team</span>
    <.menu_shortcut>⌘T</.menu_shortcut>
  </.menu_item>
</.menu_group>