Overview
BottomNavigation provides navigation for mobile interfaces, displaying 3-5 navigation actions at the bottom of the screen. It’s ideal for switching between top-level views in a single tap.
Installation
npm install @naturacosmeticos/natds-web
Import
import {
BottomNavigation,
BottomNavigationAction
} from '@naturacosmeticos/natds-web';
Props
BottomNavigation
If true, all BottomNavigationActions will show their labels. By default, only the selected action shows its label.
The value of the currently selected BottomNavigationAction.
Callback fired when the value changes.
The component used for the root node. Either a string to use a HTML element or a component.
The content of the component, typically BottomNavigationAction components.
BottomNavigationAction
Inherits props from Material-UI’s BottomNavigationAction component.
The label element displayed for the action.
The icon to display for the action.
The value to use for identifying the action.
If true, the label will be displayed regardless of the parent’s showLabels prop.
Usage
Basic Bottom Navigation
import {
BottomNavigation,
BottomNavigationAction,
Icon
} from '@naturacosmeticos/natds-web';
import { useState } from 'react';
function BasicBottomNav() {
const [value, setValue] = useState('home');
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<BottomNavigation value={value} onChange={handleChange}>
<BottomNavigationAction
label="Home"
value="home"
icon={<Icon name="outlined-navigation-home" />}
/>
<BottomNavigationAction
label="Favorites"
value="favorites"
icon={<Icon name="outlined-action-favorite" />}
/>
<BottomNavigationAction
label="Profile"
value="profile"
icon={<Icon name="outlined-social-person" />}
/>
</BottomNavigation>
);
}
With Labels Always Visible
import {
BottomNavigation,
BottomNavigationAction,
Icon
} from '@naturacosmeticos/natds-web';
import { useState } from 'react';
function BottomNavWithLabels() {
const [value, setValue] = useState('home');
return (
<BottomNavigation
value={value}
onChange={(e, newValue) => setValue(newValue)}
showLabels
>
<BottomNavigationAction
label="Home"
value="home"
icon={<Icon name="outlined-navigation-home" />}
/>
<BottomNavigationAction
label="Search"
value="search"
icon={<Icon name="outlined-action-search" />}
/>
<BottomNavigationAction
label="Notifications"
value="notifications"
icon={<Icon name="outlined-alert-notification" />}
/>
<BottomNavigationAction
label="Settings"
value="settings"
icon={<Icon name="outlined-action-settings" />}
/>
</BottomNavigation>
);
}
Without Labels (Default)
By default, only the selected action displays its label:
import {
BottomNavigation,
BottomNavigationAction,
Icon
} from '@naturacosmeticos/natds-web';
import { useState } from 'react';
function BottomNavWithoutLabels() {
const [value, setValue] = useState('btn2');
return (
<BottomNavigation
value={value}
onChange={(e, newValue) => setValue(newValue)}
showLabels={false}
>
<BottomNavigationAction
label="Cancel"
value="btn1"
icon={<Icon name="outlined-navigation-cancel" />}
/>
<BottomNavigationAction
label="Check"
value="btn2"
icon={<Icon name="outlined-navigation-check" />}
/>
<BottomNavigationAction
label="Play"
value="btn3"
icon={<Icon name="outlined-av-play" />}
/>
</BottomNavigation>
);
}
With Router Integration
import {
BottomNavigation,
BottomNavigationAction,
Icon
} from '@naturacosmeticos/natds-web';
import { useNavigate, useLocation } from 'react-router-dom';
function BottomNavWithRouter() {
const navigate = useNavigate();
const location = useLocation();
const handleChange = (event, newValue) => {
navigate(newValue);
};
return (
<BottomNavigation
value={location.pathname}
onChange={handleChange}
showLabels
>
<BottomNavigationAction
label="Home"
value="/"
icon={<Icon name="outlined-navigation-home" />}
/>
<BottomNavigationAction
label="Products"
value="/products"
icon={<Icon name="outlined-action-shopping-cart" />}
/>
<BottomNavigationAction
label="Orders"
value="/orders"
icon={<Icon name="outlined-action-receipt" />}
/>
<BottomNavigationAction
label="Account"
value="/account"
icon={<Icon name="outlined-social-person" />}
/>
</BottomNavigation>
);
}
Best Practices
- Use 3-5 navigation items for optimal usability
- Each action should navigate to a top-level destination
- Provide clear, concise labels (1-2 words)
- Use recognizable icons that match the labels
- Consider using
showLabels for better accessibility
- Position at the bottom of the screen on mobile devices
Accessibility
- Each action should have a descriptive label for screen readers
- Use semantic icons that clearly represent their function
- Ensure adequate touch target size (minimum 48x48px)
- Maintain sufficient color contrast for selected/unselected states
- Test with keyboard navigation
Mobile Considerations
- Best suited for mobile and tablet layouts
- Position with
position: fixed; bottom: 0 for persistent navigation
- Consider hiding on scroll for content-focused experiences
- On larger screens, consider using a Drawer or AppBar instead
Related Components
Material-UI Reference
This component is based on Material-UI’s BottomNavigation. For advanced usage, see the Material-UI Bottom Navigation documentation.
