Rail Navigation

import { AXRailNavigationModule } from '@acorex/components/rail-navigation';

The Rail Navigation component offers persistent, vertical navigation, typically positioned on the left or right side of the screen. Ideal for complex applications, it provides a clear visual hierarchy and enables quick context switching between different sections or features.

Overview

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

Look

With-line

Location

Start

Disabled

Side Menu

An example of creating a side menu using ax-rail-navigation.

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-rail-navigation-font-size	0.875rem	Font size of the rail navigation items.
--ax-comp-rail-navigation-line-height	1.375rem	Line height of the rail navigation items.
--ax-comp-rail-navigation-width	7rem	Width of the rail navigation component.
--ax-comp-rail-navigation-item-opacity	0.6	Opacity of inactive rail navigation items.
--ax-comp-rail-navigation-item-text-color	var(--ax-sys-color-on-lightest-surface)	Text color of rail navigation items. Defaults to the system's body text color.
--ax-comp-rail-navigation-item-icon-font-size	1.125rem	Font size of the icons within rail navigation items.
--ax-comp-rail-navigation-item-icon-border-radius	1rem	Border radius of the icons within rail navigation items.
--ax-comp-rail-navigation-item-icon-padding-block	0.25rem	Vertical padding of the icons within rail navigation items.
--ax-comp-rail-navigation-item-icon-padding-inline	1.25rem	Horizontal padding of the icons within rail navigation items.
--ax-comp-rail-navigation-item-text-font-weight	500	Font weight of the text within rail navigation items.
--ax-comp-rail-navigation-item-hover-opacity	0.75	Opacity of rail navigation items on hover.
--ax-comp-rail-navigation-item-disabled-opacity	0.3	Opacity of disabled rail navigation items.
--ax-comp-rail-navigation-item-active-opacity	1	Opacity of the active rail navigation item.
--ax-comp-rail-navigation-indicator-size	2px	Size (width) of the active item indicator.
--ax-comp-rail-navigation-indicator-color	var(--ax-sys-color-on-lightest-surface)	Color of the active item indicator. Defaults to the system's body text color.
--ax-comp-rail-navigation-bg-color	var(--ax-sys-color-primary-surface)	Background color of the active item in the 'with-line-color' look. Uses the primary color at its 500 shade.
--ax-comp-rail-navigation-item-pills-opacity	0.7	Opacity of rail navigation items in the 'pills' look.
--ax-comp-rail-navigation-item-pills-hover-opacity	0.85	Opacity of rail navigation items on hover in the 'pills' look.
--ax-comp-rail-navigation-item-pills-hover-icon-bg-color	var(--ax-sys-color-surface)	Background color of the icon within a hovered item in the 'pills' look.
--ax-comp-rail-navigation-item-pills-active-opacity	1	Opacity of the active rail navigation item in the 'pills' look.
--ax-comp-rail-navigation-item-pills-active-icon-bg-color	var(--ax-sys-color-darker-surface)	Background color of the icon within the active item in the 'pills' look. Uses the system's body text color.
--ax-comp-rail-navigation-item-pills-color-active-icon-bg-color	var(--ax-sys-color-primary-surface)	Background color of the icon within the active item in the 'pills-color' look. Uses the primary color at its 500 shade.