Lqvrent UI
Lqvrent UI

General

Layout

Navigation

Data Display

Data Entry

Feedback

Navigation

Menu

Horizontal menu

Description

This component implements a top navigation (horizontal) and side navigation (vertical and inline).
If inline, every submenu items will be included directly in the menu. Otherwise, a popover will appear with every items inside.
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 { LuiMenuModule } from '@lqvrent-workspace/lqvrent-ui/menu';
<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-menu]

component Standalone
PropertyDescriptionTypeDefault
[luiMode]Type of the menu'vertical' | 'horizontal' | 'inline''vertical'
[luiInlineIndent]Indent (in px) of inline menu item on each levelnumber24
[luiSelectable]Allow selecting menu itemsbooleantrue
[luiClass]Styling class for the menustringdefined in config
(onItemClick)Event emitted when click lui-menu-item inside menuEventEmitter<LuiMenuItemComponent>-

[lui-menu-item]

component Standalone
PropertyDescriptionTypeDefault
[luiDisabled]Wether item is disabledbooleanfalse
[luiSelected]Wether item is selectedbooleanfalse
[luiMatchRouter]Set [luiSelected] according to routerLinkbooleanfalse
[luiMatchRouterExact]Only match when the url matches the link exactlybooleanfalse
[luiPaddingLeft]Inline indent (injected by [lui-menu])number-
[luiClass]Styling class for the menu itemstringdefined in config
[luiSelectedClass]Styling class for the menu item when selectedstringdefined in config

[lui-submenu]

component Standalone
PropertyDescriptionTypeDefault
[luiTitle]Title of the submenustring | TemplateRef<void>-
[luiDisabled]Wether submenu is disabledbooleanfalse
[luiOpen]Wether submenu is open, supports double bindingbooleanfalse
[luiPlacement]Placement of the popover when opened'bottomLeft' | 'bottomCenter' | 'bottomRight' | 'topLeft' | 'topCenter' 'topRight'true
[luiPaddingLeft]Inline indent (injected by [lui-menu])number-
[luiClass]Styling class for the submenustringdefined in config
[luiOpenClass]Styling class for the submenu when selectedstringdefined in config
[luiSelectedClass]Styling class for the submenu when selectedstringdefined in config
[luiPopoverClass]Classes for the popoverstringdefined in config
(luiOpenChange)Event emitted when the open state is changedEventEmitter<boolean>-

[lui-menu-divider]

component Standalone
PropertyDescriptionTypeDefault
[luiClass]Styling class for the dividerstringdefined in config

The divider is only shown inside dropdown/popover.

More examples

Vertical menu

Inline menu

  • Navigation One
  • Navigation Two
  • Navigation Three - Submenu
    • Option 1
    • Option 2
    • Option 3
    • Option 4
    • Sub Menu
      • Option 5
      • Option 6
    • Disabled Sub Menu
      • Option 5
      • Option 6
  • Navigation Four - Link

Submenu placement

  • bottomLeft
  • bottomCenter (default)
  • bottomRight
  • topLeft
  • topCenter
  • topRight

Open one submenu only

  • Submenu 1
    • Option 1
    • Option 2
    • Sub Menu
      • Option 5
      • Option 6
  • Submenu 2
    • Option 7
    • Option 8
  • Submenu 3
    • Option 9
    • Option 10
    • Option 11
    • Option 12

Match router

Custom style

Icons and custom style

  • My account
  • Contact us
  • About us

Inline w/ icons and custom style

  • Home
  • My account
    • Profile
    • Settings
      • Privacy
      • Security
    • Log out
  • Contact us
  • About us
Previous
Dropdown
Next
Tabs