Breadcrumb

import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';

Breadcrumbs are a navigation component that displays the user's current location within a website or app hierarchy. They show a trail of links from the homepage to the current page, allowing users to easily navigate back to previous sections.

Overview

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

Active Item

Disabled Item

Prefix icons

Custom divider

Usage

A simple example of using ax-breadcrumbs

Preview

Code

Activated state

You can activated breadcrumb.

Preview

Code

Disabled state

You can disabled breadcrumb.

Preview

Code

Icon Mode

You can use icon with breadcrumb.

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-breadcrumbs-text-color	var(--ax-sys-color-on-lightest-surface)	Text color for breadcrumb items. Uses the system's text color.
--ax-comp-breadcrumbs-text-active-color	var(--ax-sys-color-primary-surface)	Text color for the active breadcrumb item. Uses the primary color.
--ax-comp-breadcrumbs-text-opacity	0.75	Opacity of the breadcrumb text (0 = transparent, 1 = opaque).
--ax-comp-breadcrumbs-prefix-padding-x	0.5rem	Horizontal padding for the prefix (e.g., icon) before the text.
--ax-comp-breadcrumbs-divider-padding-x	0.375rem	Horizontal padding for the dividers between items.

Props

active	boolean	false	Indicates whether the breadcrumb item is active.
disabled	boolean	false	Specifies whether the breadcrumb item is disabled.