Prism Docs

Dropdown

A versatile menu component for navigation and actions, supporting custom positioning and triggers.

Trigger Modes

1st menu item2nd menu item3rd menu item

<button prismDropdown [prismDropdown]="hoverMenu" trigger="hover">
  Hover me
</button>

<prism-dropdown-menu #hoverMenu>
  <prism-menu-item>Profile</prism-menu-item>
  <prism-menu-item>Settings</prism-menu-item>
</prism-dropdown-menu>
DashboardTeam ManagementBilling Settings

<prism-button 
  [prismDropdown]="clickMenu" 
  trigger="click" 
  label="Click me">
</prism-button>

<prism-dropdown-menu #clickMenu>
  <prism-menu-item>Dashboard</prism-menu-item>
  <prism-menu-item>Team Management</prism-menu-item>
</prism-dropdown-menu>

Placements

Menu Item 1Menu Item 2Menu Item 3

<prism-button [prismDropdown]="menu" placement="bottomLeft" label="Bottom Left"></prism-button>
<prism-button [prismDropdown]="menu" placement="bottomRight" label="Bottom Right"></prism-button>
<prism-button [prismDropdown]="menu" placement="topLeft" label="Top Left"></prism-button>
<prism-button [prismDropdown]="menu" placement="topRight" label="Top Right"></prism-button>

Advanced Items

View Profile Edit Account Admin Settings
Sign out 

<prism-dropdown-menu #menu>
  <prism-menu-item>
    <prism-icon name="user-line"></prism-icon>
    Profile
  </prism-menu-item>
  <prism-menu-item [disabled]="true">
    <prism-icon name="lock-line"></prism-icon>
    Admin Panel (Disabled)
  </prism-menu-item>
  <div class="prism-menu-divider"></div>
  <prism-menu-item class="text-danger-600">
    <prism-icon name="logout-box-r-line"></prism-icon>
    Sign out
  </prism-menu-item>
</prism-dropdown-menu>

PrismDropdown API

NameTypeDefaultDescription
prismDropdownPrismDropdownMenuComponentrequiredThe dropdown menu component instance to display.
trigger'click' | 'hover''hover'Trigger mode for showing/hiding the dropdown.
placementPrismDropdownPlacement'bottomLeft'The alignment position of the dropdown menu.
prism-menu-item [disabled]booleanfalseWhether the menu item is disabled.