Basic
Description
This component is used to create a dropdown menu. It can be triggered by a button or a link with a hover or click event.
The dropdown menu can contain links, dividers, disabled items and submenus.
You can use icons with the icon component, the library will take care of the spacing between the icon and the text and the icon size.
API
Supports global configuration
View the default configuration for this component. Learn more about global configuration.
import { LuiDropdownModule } from '@lqvrent-workspace/lqvrent-ui/dropdown';<!-- Trigger using a link -->
<a lui-dropdown [luiDropdownMenu]="menu">
Hover me
</a>
<!-- Or trigger using a button -->
<button type="button" lui-button lui-dropdown [luiDropdownMenu]="menu">
Hover me
</button>
<!-- Define a menu -->
<lui-dropdown-menu #menu="luiDropdownMenu">
<ul lui-menu>
<li lui-menu-item>Navigation One</li>
<li lui-menu-item>Navigation Two</li>
<li lui-submenu luiTitle="Navigation Three">
<li lui-menu-item>Submenu Navigation One</li>
<li lui-menu-item>Submenu Navigation Two</li>
<li lui-menu-item>Submenu Navigation Three</li>
</li>
</ul>
</lui-dropdown-menu>[lui-dropdown]
| Property | Description | Type | Default |
|---|---|---|---|
[luiDropdownMenu] | Dropdown menu | LuiDropdownMenuComponent | - |
[luiTrigger] | Define whats trigger the dropdown menu | 'click' | 'hover' | 'hover' |
[luiClickHide] | Weither it hides the menu on click | boolean | true |
[luiDisabled] | Weither the menu is disabled | boolean | false |
[luiVisible] | Visibility of the dropdown menu Supports double binding | boolean | false |
[luiOverlayClass] | Classes for the popover | string | defined in config |
[luiPlacement] | Placement of the dropdown menu | 'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' | 'topRight' | 'bottomCenter' |
(luiVisibleChange) | Emitted when the visibility is changed | EventEmitter<boolean> | - |
lui-dropdown-menu
Wrap the dropdown menu content to pass it to [lui-dropdown] or LuiContextMenuService. You can export it via Template Syntax luiDropdownMenu.
Every [lui-dropdown] should have independent lui-dropdown-menu.
<!-- Define a menu -->
<lui-dropdown-menu #menu="luiDropdownMenu">
<ul lui-menu>
<li lui-menu-item>Navigation One</li>
<li lui-menu-item>Navigation Two</li>
<li lui-submenu luiTitle="Navigation Three">
<li lui-menu-item>Submenu Navigation One</li>
<li lui-menu-item>Submenu Navigation Two</li>
<li lui-menu-item>Submenu Navigation Three</li>
</li>
</ul>
</lui-dropdown-menu>LuiContextMenuService
| Method | Description | Arguments | Return type |
|---|---|---|---|
create | Create a dropdown menu | ($event: MouseEvent | { x: number, y: number }, menu: LuiDropdownMenuComponent, popoverClass?: string) | EmbeddedViewRef<any> |
close | Close the dropdown menu | - | - |
More examples
Click events
An event is emitted when clicking on a menu item, which can be used to trigger any action.
Dividers, disabled and submenu
Placement
Button group
Custom close
With icons and custom style
Context menu
Right click on here