Vertical Menu . BootKit

Basic Usage

The vertical menu component is used to create a vertical navigation menu with expandable and collapsible items. In this example, we create a vertical menu with several items, including headers, dividers, and nested items.

Header 1

Item 1 Item 1 tag

Item 2 Item 2 tag

Item 3 Click Me!

Parent 1

❯

Header 1

Item 1.1

Parent 2

❯

Parent 2.1

❯

Item 2.1.1

Using MenuItem[] as source

You can also provide menu items using an array of MenuItem objects. This is useful when you want to generate the menu dynamically or load it from a configuration.

Item 1

Item 2

❯

Item 2.1

Item 2.2

❯

Item 2.2.1

Show conditions

You can control the visibility of menu items based on user claims.
In this example, some menu items are only visible if the user has specific claims such as 'salesperson' or 'bartender'. This is done using the user property of the MenuItem interface. Available values for user property are:

user: null - Item is always visible, regardless of user identity.
user: true - Item is visible only if the user is authenticated.
user: false - Item is visible only if the user is not authenticated.
user: { any: ['claim1', 'claim2'] } - Item is visible if the user has at least one of the specified claims.
user: { all: ['claim1', 'claim2'] } - Item is visible if the user has all of the specified claims.

Vertical menu with items that have show conditions based on user identity:

Item 1 No show condition - always visible

Item 2 Requires user to be NOT authenticated

Menu items (MenuItem[]):

[
  {
    "text": "Item 1",
    "tag": "No show condition - always visible",
    "routerLink": "."
  },
  {
    "text": "Item 2",
    "tag": "Requires user to be NOT authenticated",
    "routerLink": ".",
    "user": false
  },
  {
    "text": "Item 3",
    "tag": "Requires user to be authenticated",
    "routerLink": ".",
    "user": true
  },
  {
    "text": "Item 4",
    "tag": "Requires user to have \"salesperson\" claim",
    "routerLink": ".",
    "user": "salesperson"
  },
  {
    "text": "Item 5",
    "tag": "Requires user to have both \"salesperson\" and \"bartender\" claims",
    "routerLink": ".",
    "user": {
      "all": [
        "salesperson",
        "bartender"
      ]
    }
  },
  {
    "text": "Item 6",
    "tag": "Requires user to have either \"salesperson\" or \"bartender\" claims",
    "routerLink": ".",
    "user": {
      "any": [
        "salesperson",
        "bartender"
      ]
    }
  },
  {
    "text": "Sales",
    "tag": "Requires user to have \"salesperson\" claim",
    "user": "salesperson",
    "children": [
      {
        "text": "Item 2.1",
        "routerLink": "."
      },
      {
        "text": "Item 2.2",
        "routerLink": ".",
        "children": [
          {
            "text": "Item 2.2.1",
            "routerLink": "."
          }
        ]
      }
    ]
  }
]

User Identity:

User:

Item Template

You can customize the appearance of menu items using the ng1VerticalMenuItemTemplate directive. This allows you to define a custom template for rendering menu items, giving you full control over their layout and styling.

Item 1

Item 2 [+]

Item 2.1

Item 2.2 [+]

Item 2.2.1

Getting started

Components

Localization

Form

Layouts

Data

File

HTTP

Platform

Security

Script

Utils

Basic Usage

Using MenuItem[] as source

Show conditions

User Identity:

Item Template