NavigationBar

The NavigationBar component represents a navigation bar fixed to the bottom of the screen. It is optimized for mobile viewports and helps users navigate between primary sections of an app.

Figma LibraryView in StorybookView in Playroom

Quick Start

Installation
npm install @adaptavant/eds-core
Import
import { NavigationBar } from '@adaptavant/eds-core';

Basic Example​

Use the "NavigationBarItem" component to display an icon and label for each navigation item. It renders as an anchor tag by default, and you can pass an href to link each item to a specific view

CalendarServicesCustomersPaymentsMore
<NavigationBar>
		<NavigationBarItem
			href="#calendar"
			icon={() => <CalDynamicIcon>{new Date().getDate()}</CalDynamicIcon>}
			label="Calendar"
		/>
		<NavigationBarItem
			href="#services"
			icon={ServicesIcon}
			label="Services"
		/>
		<NavigationBarItem
			href="#customers"
			icon={CustomerIcon}
			label="Customers"
		/>
		<NavigationBarItem
			href="#payments"
			icon={MoneyIcon}
			label="Payments"
		/>
		<NavigationBarItem href="#more" icon={NavigationIcon} label="More" />
	</NavigationBar>
View in Playroom

Active Item​

Use the isActive prop to visually indicate the selected item. You can manage this with local state, updating it on item click or route change.

CalendarServicesCustomersPaymentsMore
const ROUTES = {
	calendar: 'calendar',
	services: 'services',
	customers: 'customers',
	payments: 'payments',
	more: 'more',
};

const [activeItem, setActiveItem] = React.useState(ROUTES['calendar']);

return (
	<NavigationBar>
		<NavigationBarItem
			href="#calendar"
			icon={() => <CalDynamicIcon>{new Date().getDate()}</CalDynamicIcon>}
			isActive={activeItem === ROUTES['calendar']}
			label="Calendar"
			onClick={() => setActiveItem(ROUTES['calendar'])}
		/>
		<NavigationBarItem
			href="#services"
			icon={ServicesIcon}
			isActive={activeItem === ROUTES['services']}
			label="Services"
			onClick={() => setActiveItem(ROUTES['services'])}
		/>
		<NavigationBarItem
			href="#customers"
			icon={CustomerIcon}
			isActive={activeItem === ROUTES['customers']}
			label="Customers"
			onClick={() => setActiveItem(ROUTES['customers'])}
		/>
		<NavigationBarItem
			href="#payments"
			icon={MoneyIcon}
			isActive={activeItem === ROUTES['payments']}
			label="Payments"
			onClick={() => setActiveItem(ROUTES['payments'])}
		/>
		<NavigationBarItem
			href="#more"
			icon={NavigationIcon}
			isActive={activeItem === ROUTES['more']}
			label="More"
			onClick={() => setActiveItem(ROUTES['more'])}
		/>
	</NavigationBar>
);
View in Playroom

Placement​

Use the placement prop to anchor the navigation bar to a specific position within the viewport.

  • bottom – Fixes the navigation bar to the bottom of the viewport.

If not set, the component will render in the normal document flow without any fixed positioning.

CalendarServicesCustomersPaymentsMore
<NavigationBar>
		<NavigationBarItem
			href="#calendar"
			icon={() => <CalDynamicIcon>{new Date().getDate()}</CalDynamicIcon>}
			label="Calendar"
		/>
		<NavigationBarItem
			href="#services"
			icon={ServicesIcon}
			label="Services"
		/>
		<NavigationBarItem
			href="#customers"
			icon={CustomerIcon}
			label="Customers"
		/>
		<NavigationBarItem
			href="#payments"
			icon={MoneyIcon}
			label="Payments"
		/>
		<NavigationBarItem href="#more" icon={NavigationIcon} label="More" />
	</NavigationBar>
View in Playroom

Adapting With Frameworks​

NavigationBarItem is polymorphic and can render as different components using the as prop. This is particularly useful when integrating with framework-specific link components, like React Router or Next.js.

When you pass a component to the as prop, NavigationBarItem will render as that component and accept all of its props, as well as the component's usual props.

Using React Router's Link component​

import { Link } from "react-router";

<NavigationBarItem
    // NavigationBarItem props
    icon={SettingsIcon}
    isActive={activeItem === 'settings'}
    label="Settings"
    as={Link}
    // React Router's Link props
    to="/settings"
/>

Using Next.js Link component​

import NextLink from 'next/link';

<NavigationBarItem
    // NavigationBarItem props
    icon={SettingsIcon}
    isActive={activeItem === 'settings'}
    label="Settings"
    as={NextLink}
    href="/settings"
    // Next Link props
    {...otherNextLinkProps} // Based on usage.
/>

This polymorphic behavior allows NavigationBarItem to maintain its styling and accessibility features while adapting to different routing systems or custom components.

API Reference​

NavigationBar

NavigationBarItem

Style API​

Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.

Please refer to the Style API documentation for more insights.

NavigationBar parts​

CalendarServicesCustomersPaymentsMore
<NavigationBar
	className="border border-palette-orange-border p-2"
	classNames={{
		wrapper: 'border border-palette-orange-border p-2',
	}}
>
	<NavigationBarItem
		href="#calendar"
		icon={() => <CalDynamicIcon>{new Date().getDate()}</CalDynamicIcon>}
		label="Calendar"
	/>
	<NavigationBarItem href="#services" icon={ServicesIcon} label="Services" />
	<NavigationBarItem href="#customers" icon={CustomerIcon} label="Customers" />
	<NavigationBarItem href="#payments" icon={MoneyIcon} label="Payments" />
	<NavigationBarItem href="#more" icon={NavigationIcon} label="More" />
</NavigationBar>
View in Playroom
Stylable PartsDescription
wrapperThe wrapper for the navigation bar items_

NavigationBarItem parts​

CalendarServicesCustomersPaymentsMore
<NavigationBar>
	<NavigationBarItem
		className="bg-palette-orange-background"
		classNames={{
			label: 'text-palette-orange-text',
		}}
		href="#calendar"
		icon={() => (
			<CalDynamicIcon className="text-palette-orange-text">
				{new Date().getDate()}
			</CalDynamicIcon>
		)}
		label="Calendar"
	/>
	<NavigationBarItem
		className="bg-palette-orange-background"
		classNames={{
			label: 'text-palette-orange-text',
			icon: 'text-palette-orange-text',
		}}
		href="#services"
		icon={ServicesIcon}
		label="Services"
	/>
	<NavigationBarItem
		className="bg-palette-orange-background"
		classNames={{
			label: 'text-palette-orange-text',
			icon: 'text-palette-orange-text',
		}}
		href="#customers"
		icon={CustomerIcon}
		label="Customers"
	/>
	<NavigationBarItem
		className="bg-palette-orange-background"
		classNames={{
			label: 'text-palette-orange-text',
			icon: 'text-palette-orange-text',
		}}
		href="#payments"
		icon={MoneyIcon}
		label="Payments"
	/>
	<NavigationBarItem
		className="bg-palette-orange-background"
		classNames={{
			label: 'text-palette-orange-text',
			icon: 'text-palette-orange-text',
		}}
		href="#more"
		icon={NavigationIcon}
		label="More"
	/>
</NavigationBar>
View in Playroom
Stylable PartsDescription
labelThe text content of the navigation item_
iconIcon for the navigation item_