
        
          1
          
          <MenuContainer>
        

          2
          
            <MenuButton size="small" show-chevron>
        

          3
          
              Actions
        

          4
          
            </MenuButton>
        

          5
          
            <Menu>
        

          6
          
              <MenuItem>Duplicate</MenuItem>
        

          7
          
              <MenuItem>Rename</MenuItem>
        

          8
          
              <MenuItem type="error">Delete</MenuItem>
        

          9
          
            </Menu>
        

          10
          
          </MenuContainer>

Prefix and suffix

Leading icon names the action. Suffix is reserved for a shortcut or status.


        
          1
          
          <MenuItem>
        

          2
          
            <template #prefix>
        

          3
          
              <Icon :icon="Copy01Icon" :size="14" />
        

          4
          
            </template>
        

          5
          
            Duplicate
        

          6
          
          </MenuItem>

Disabled and locked

disabled greys the row. MenuItemLocked adds the lock mark for a plan-gated action.


        
          1
          
          <MenuItem disabled>Rename</MenuItem>
        

          2
          
          <MenuItemLocked>Custom Domain</MenuItemLocked>

Links

MenuLink always navigates. MenuItem with href also renders as an anchor.


        
          1
          
          <MenuLink href="/button">Button</MenuLink>
        

          2
          
          <MenuItem href="/modal">Modal</MenuItem>

Sections

MenuSection groups related rows. MenuDivider splits groups that do not need a title.


        
          1
          
          <MenuSection title="Teams">
        

          2
          
            <MenuItem>Abramovich</MenuItem>
        

          3
          
          </MenuSection>
        

          4
          
          <MenuDivider />
        

          5
          
          <MenuItem>Create Team</MenuItem>

Width

Pass a number (px) or a CSS width string when the default 160px min is too tight for labels.


        
          1
          
          <Menu :width="240">
        

          2
          
            <MenuItem>Washington, D.C., USA (East)</MenuItem>
        

          3
          
          </Menu>

Position

Default is bottom-start. Set position on MenuContainer so every nested Menu inherits it.


        
          1
          
          <MenuContainer position="bottom-end">
        

          2
          
            <MenuButton variant="secondary" size="small">Open</MenuButton>
        

          3
          
            <Menu>
        

          4
          
              <MenuItem>Duplicate</MenuItem>
        

          5
          
            </Menu>
        

          6
          
          </MenuContainer>

Unstyled trigger

type unstyled drops the Button chrome when the trigger is an avatar row or a custom chip.


        
          1
          
          <MenuButton type="unstyled" class="inline-flex h-8 items-center gap-2 rounded-[6px] px-2 hover:bg-[var(--ds-gray-100)]">
        

          2
          
            Abramovich
        

          3
          
          </MenuButton>

Best practices

Use Menu when two or more related actions share one trigger. A single action is a Button. A URL change is MenuLink or ButtonLink.
This port is MenuContainer + MenuButton + Menu + MenuItem. Do not reach for DropdownMenu on new screens.
Destructive rows use type="error" and sit last, under a divider.
Disable a row only when the action is impossible. Locked plan features use MenuItemLocked, not a silent disabled item.
Keep labels short Title Case verbs: Duplicate, Transfer. Prefix icons are optional; do not decorate every row.