Menubar · shadcn/ui for Phoenix LiveView

Basic

A simple menubar with File and Edit menus. Click a trigger or press Enter/ArrowDown to open. Arrow keys navigate between triggers and between menus. Hover switches menus when one is already open.

Full Demo

Four menus: File (sub-menu "Share"), Edit (sub-menu "Find"), View (checkbox items), Profiles (radio group). Mirrors the shadcn official demo.

Server state: bookmarks_bar=true, full_urls=false, profile=benoit

<.menubar id="full-menubar">
  <.menubar_menu>
    <.menubar_trigger>File</.menubar_trigger>
    <.menubar_content>
      <.menubar_item>
        New Tab <.menubar_shortcut>⌘T</.menubar_shortcut>
      </.menubar_item>
      <.menubar_item>
        New Window <.menubar_shortcut>⌘N</.menubar_shortcut>
      </.menubar_item>
      <.menubar_item disabled>New Incognito Window</.menubar_item>
      <.menubar_separator />
      <.menubar_sub>
        <.menubar_sub_trigger>Share</.menubar_sub_trigger>
        <.menubar_sub_content>
          <.menubar_item>Email Link</.menubar_item>
          <.menubar_item>Messages</.menubar_item>
          <.menubar_item>Notes</.menubar_item>
        </.menubar_sub_content>
      </.menubar_sub>
      <.menubar_separator />
      <.menubar_item>
        Print... <.menubar_shortcut>⌘P</.menubar_shortcut>
      </.menubar_item>
    </.menubar_content>
  </.menubar_menu>

  <.menubar_menu>
    <.menubar_trigger>Edit</.menubar_trigger>
    <.menubar_content>
      <.menubar_item>
        Undo <.menubar_shortcut>⌘Z</.menubar_shortcut>
      </.menubar_item>
      <.menubar_item>
        Redo <.menubar_shortcut>⇧⌘Z</.menubar_shortcut>
      </.menubar_item>
      <.menubar_separator />
      <.menubar_sub>
        <.menubar_sub_trigger>Find</.menubar_sub_trigger>
        <.menubar_sub_content>
          <.menubar_item>Search the web</.menubar_item>
          <.menubar_separator />
          <.menubar_item>Find...</.menubar_item>
          <.menubar_item>Find Next</.menubar_item>
          <.menubar_item>Find Previous</.menubar_item>
        </.menubar_sub_content>
      </.menubar_sub>
      <.menubar_separator />
      <.menubar_item>Cut</.menubar_item>
      <.menubar_item>Copy</.menubar_item>
      <.menubar_item>Paste</.menubar_item>
    </.menubar_content>
  </.menubar_menu>

  <.menubar_menu>
    <.menubar_trigger>View</.menubar_trigger>
    <.menubar_content>
      <.menubar_checkbox_item checked={@show_bookmarks_bar} phx-click="toggle-bookmarks-bar">
        Always Show Bookmarks Bar
      </.menubar_checkbox_item>
      <.menubar_checkbox_item checked={@show_full_urls} phx-click="toggle-full-urls">
        Always Show Full URLs
      </.menubar_checkbox_item>
      <.menubar_separator />
      <.menubar_item inset>
        Reload <.menubar_shortcut>⌘R</.menubar_shortcut>
      </.menubar_item>
      <.menubar_item inset disabled>
        Force Reload <.menubar_shortcut>⇧⌘R</.menubar_shortcut>
      </.menubar_item>
      <.menubar_separator />
      <.menubar_item inset>Toggle Fullscreen</.menubar_item>
      <.menubar_item inset>Hide Sidebar</.menubar_item>
    </.menubar_content>
  </.menubar_menu>

  <.menubar_menu>
    <.menubar_trigger>Profiles</.menubar_trigger>
    <.menubar_content>
      <.menubar_radio_group>
        <.menubar_radio_item
          :for={name <- ~w(benoit pedro colm)}
          checked={@profile == name}
          phx-click="set-profile"
          phx-value-val={name}
        >
          {String.capitalize(name)}
        </.menubar_radio_item>
      </.menubar_radio_group>
      <.menubar_separator />
      <.menubar_item inset>Edit...</.menubar_item>
      <.menubar_separator />
      <.menubar_item inset>Add Profile...</.menubar_item>
    </.menubar_content>
  </.menubar_menu>
</.menubar>

With Icons

Menu items with leading hero icons.

Disabled Items

Disabled items are visually dimmed and skipped by keyboard navigation.