Side Menu

To use side menu, you need to import BrowserAnimationsModule in app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AXSideMenuModule } from '@acorex/components/side-menu';

Side Menu component is used to display a navigation menu in the sidebar of a website or application, allowing users to easily access and switch between different pages or sections. It offers a compact and intuitive way to organize and navigate content within the interface.

Overview

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

Dashboard

Users

List of users

Verified users

Unverified users

Users are blocked

Comments

All Comments

Comments approved

Unverified comments

Look

Pills

Location

Start

Disabled

Usage

A simple example of using ax-side-menu

Preview

Code

Customize font

you can change font style on side menu.

Preview

Code

Use decorator

You can use decorators in ax-menu-item.

Preview

Code

Group Title

You can use decorators in ax-title.

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-side-menu-gap	0.5rem	Gap between elements within the side menu.
--ax-comp-side-menu-font-size	0.875rem	Font size of the side menu items.
--ax-comp-side-menu-line-height	1.25rem	Line height of the side menu items.
--ax-comp-side-menu-title-opacity	0.5	Opacity of the side menu titles.
--ax-comp-side-menu-title-font-size	0.75rem	Font size of the side menu titles.
--ax-comp-side-menu-divider-height	1px	Height (thickness) of the side menu dividers.
--ax-comp-side-menu-divider-margin-y	0.25rem	Vertical margin of the side menu dividers.
--ax-comp-side-menu-divider-bg-color	var(--ax-sys-color-border-lightest-surface)	Background color of the side menu dividers. Defaults to the system's border color.
--ax-comp-side-menu-item-padding-x	1rem	Horizontal padding of side menu items.
--ax-comp-side-menu-item-padding-y	0.5rem	Vertical padding of side menu items.
--ax-comp-side-menu-item-disabled-opacity	0.5	Opacity of disabled side menu items.
--ax-comp-side-menu-children-gap	0.5rem	Gap between child items in the side menu.
--ax-comp-side-menu-pills-border-radius	var(--ax-sys-border-radius)	Border radius of the side menu items in the 'pills' look. Defaults to the system's border radius.
--ax-comp-side-menu-indicator-size	2px	Size (width) of the side menu indicator.
--ax-comp-side-menu-indicator-color	var(--ax-sys-color-border-lightest-surface)	Color of the side menu indicator. Defaults to the system's border color.
--ax-comp-side-menu-indicator-active-color	var(--ax-comp-side-menu-fg-color)	Color of the active side menu indicator. Defaults to the side menu foreground color.
--ax-comp-side-menu-text-color	var(--ax-sys-color-on-primary-surface)	Text color of the side menu item.
--ax-comp-side-menu-hover-text-color	var(--ax-sys-color-on-surface)	Text color of the side menu item when hovered.
--ax-comp-side-menu-hover-bg-color	var(--ax-sys-color-surface)	Background color of the side menu item when hovered.
--ax-comp-side-menu-active-text-color	var(--ax-sys-color-on-primary-surface)	Text color of the side menu item when active.
--ax-comp-side-menu-active-bg-color	var(--ax-sys-color-primary-surface)	Background color of the side menu item when active.
--ax-comp-side-menu-bg-color	var(--ax-sys-color-primary-surface)	Background color of the side menu item.
--ax-comp-side-menu-ripple-color	var(--ax-sys-color-on-surface)	Ripple effect of the side menu item.