Menu component is designed to be highly flexible and is accompanied by a rich set of customization options, enabling developers to seamlessly integrate it into their application's design and branding. With support for multi-level navigation, item disabling, and the ability to add prefixes and suffixes, the ACoreX Menu component is an indispensable tool for building intuitive and visually appealing navigation systems in Angular applications.

Overview

In this section, you can test different options of this component and see the output in real time

Color

Default

Orientation

Horizontal

Open On

Click

hasArrow

Disabled

Usage

A simple example of using ax-menu

Preview

Code

Use decorators

You can use ax-prefix and ax-suffix to add elements to the beginning and end of a menu item. Remember to import the AXDecoratorModule

Preview

Code

Multi level

Menu can have a nested structure

Preview

Code

Vertical menu

Menu can have vertical mode

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-menu-items-padding-block	0.5rem	Vertical padding of the menu items container.
--ax-comp-menu-items-min-width	12rem	Minimum width of the menu items container.
--ax-comp-menu-items-border-radius	var(--ax-sys-border-radius)	Border radius of the menu items container.
--ax-comp-menu-items-border-width	1px	Border width of the menu items container.
--ax-comp-menu-items-border-color	var(--ax-sys-color-border-lightest-surface)	Border color of the menu items container. Defaults to the system's border color.
--ax-comp-menu-items-text-color	var(--ax-sys-color-on-lightest-surface)	Text color of the menu items. Defaults to the system's body text color.
--ax-comp-menu-item-bg-color	var(--ax-sys-color-#{$name}-surface)	Background color of the menu item on hover. This variable is set by the variant classes (danger, ghost, secondary, primary, success, warning).
--ax-comp-menu-item-text-color	var(--ax-sys-color-on-#{$name}-surface)	Text color of the menu item on hover. This variable is set by the variant classes (danger, ghost, secondary, primary, success, warning).
--ax-comp-menu-item-suffix-text-color	var(--ax-sys-color-on-#{$name}-surface)	Text color of the menu item suffix on hover. This variable is set by the variant classes (danger, ghost, secondary, primary, success, warning).
--ax-comp-menu-icon-padding-inline-start	0.25rem	Start padding of the icon within a menu item.
--ax-comp-menu-action-list-hover-decorator-opacity	0.5	Opacity of the hover effect on menu item decorators (icon/text) in action lists.
--ax-comp-menu-action-list-horizontal-padding-inline	1rem	Horizontal padding of horizontal action lists.
--ax-comp-menu-action-list-horizontal-min-width	12rem	Minimum width of horizontal action lists.
--ax-comp-menu-action-list-horizontal-gap	0.875rem	Gap between items in horizontal action lists.
--ax-comp-menu-action-list-vertical-min-width	12rem	Minimum width of vertical action lists.