Bottom navigation component built for chakra
Chakra-UI Bottom Navigation is an accessible and reusable component built to work seamlessly with Chakra-UI.
Check the demo
- Multiple variants
- Easily modifed
- Composable
- And more...
``bash`
npm install chakra-ui-bottom-navigationor
yarn add chakra-ui-bottom-navigation
> NOTE: this component requries Chakra-UI >= v1.0.0 to work properly. You can follow instructions for installing Chakara-UI or instructions for migrating to v1
By default, this component comes with some predefined styles. To utilize this styles add them to theme overrides.
`jsx
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { BottomNavigationStyleConfig as BottomNavigation } from 'chakra-ui-bottom-navigation';
const theme = extendTheme({
components: {
BottomNavigation,
},
});
export const App = () => {
return (
);
};
`
If you want to expand defualt styles of the component, use the withDefaultStyles HOC. Component override follows the same structure as all other Chakra-UI components. Check the guide here.
`jsx
import { withDefaultStyles } from 'chakra-ui-bottom-navigation';
const bottomNavigationOverries = {
// ... component's override
};
const MyBottomNavigation = withDefaultStyles(bottomNavigationOverries);
const theme = extendTheme({
components: {
BottomNavigation: MyBottomNavigation,
},
});
`
Chakra-UI Bottom Navigation exports 4 component:
- BottomNavigation: The wrapper that provides context for all children.BottomNavigationItem
- : A single Bottom Navigation elementBottomNavigationIcon
- : An icon used to render the itemBottomNavigationLabel
- : A label used to label an item
`jsx
export const BasicExample = () => {
const [value, setValue] = useState(0);
return (
);
};
`
`jsx
export const NavigationExample = () => {
const router = useRouter();
const handleChange = useCallback(
(path) => {
router.push(path);
},
[router.push]
);
return (
);
};
`
BottomNavigation composes Box so you call pass all Box related props.
| Prop name | Description | Default value | Values |
| ------------- | --------------------------------------------- | ------------- | ------------------------------------------------------ |
| colorScheme | | blue | all default chakra-ui colorSchemes (can be extended) |onChange
| | function that is called when item is selected | | |showLabel
| | determines when label should be visible | always | 'never' \| 'if-active' \| 'always' |value
| | active value of bottom navigation | | |
BottomNavigationItem composes Button so you call pass all Button related props.
| Prop name | Description | Default value | Values |
| --------- | ----------------------------------------------- | --------------------------------------------- | ------ |
| value | Value that will be passed to onChange handler | by default, value is set to index of the item | |
BottomNavigationItem composes Icon so you call pass all Icon related props.
BottomNavigationItem composes Box so you call pass all Box related props.
Every BottomNavigationItem should have BottomNavigationLabel so assistive technologies can label the element. If label is now show (inactive when showLabel: 'if-active' or when showLabel: 'never'), the label is only hidden from the screen but it is still rendered in the DOM.