Bottom Navigation

import { AXBottomNavigationModule } from '@acorex/components/bottom-navigation';

Bottom Navigation component is a user interface element designed for navigation within applications. It serves as an interactive control, allowing users to perform actions through clicks. Highly customizable, it offers flexibility in both appearance and functionality to meet various interface needs.

Overview

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

Home

Favorite

Profile

Look

Solid

Indicator Position

Top

Has Border

Disabled

Usage

A simple example of using ax-bottom-navigation

Preview

Code

Has Border

Using the hasBorder property, you can add a line to the top of the bottom navigation

Preview

Code

Indicator Position

Using Indicator Position, you can determine the display position of indicator. This property accepts the values top and bottom. the default value is top.

Preview

Code

Prefix / Suffix

You can use ax-prefix and ax-suffix inside ax-bottom-navigation-item

Preview

Code

Disabled

You can disable a bottom navigation item by using the disabled property

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-bottom-navigation-bg-color	var(--ax-sys-color-surface)	Background color of the bottom navigation bar. Uses the system's surface color.
--ax-comp-bottom-navigation-border-size	1px	Border thickness of the bottom navigation bar.
--ax-comp-bottom-navigation-text-color	var(--ax-sys-color-on-surface)	Text color for inactive items. Uses the system's text color.
--ax-comp-bottom-navigation-active-text-color	N/A	Text color for the active item.
--ax-comp-bottom-navigation-active-bg-color	N/A	Background color for the active item (applies to 'with-line' look).
--ax-comp-bottom-navigation-active-icon-bg-color	unset	Background color for the active item's icon (applies to 'pills' look).
--ax-comp-bottom-navigation-ripple-color	var(--ax-sys-color-primary-surface), 0.3	Color of the ripple effect on item interaction. Uses the primary color with 0.3 opacity.
--ax-comp-bottom-navigation-indicator-width	60%	Width of the active item indicator.
--ax-comp-bottom-navigation-indicator-height	0.2rem	Height of the active item indicator.
--ax-comp-bottom-navigation-indicator-border-radius	0.125rem	Border radius of the active item indicator.

Props

name	string	-	Sets the name of the navigation item.
active	boolean	false	Indicates whether the navigation item is active.
look	AXStyleLookType	solid	Determines the appearance of the navigation item.
disabled	boolean	false	Specifies whether the navigation item is disabled.
hasBorder	boolean	false	Indicates whether the navigation item has a border.
indicatorPosition	string	top	Specifies the position of the indicator on the navigation item.
readonly	boolean	false	Specifies whether the navigation item is read-only.

Methods

onItemClick	AXClickEvent	Specifies the function to be called when an item in the bottom navigation is clicked.