A flexible bottom navigation component for React applications
npm install reactjs-bottom-navigationbash
npm install --save reactjs-bottom-navigation
`
Props
| Props | Type | Default | Description |
|------------------|--------------------------|-----------|-----------------------------------------------------------------------------|
| items | BottomNavigationItem[] | - | The array of items to display in the navigation |
| selected | number | null | (optional) The index of the currently selected item |
| onItemClick | function | - | (optional) Triggered when an item is clicked, returns the clicked item |
| activeBgColor | string | - | (optional) Custom active background color code |
| activeTextColor | string | black | (optional) Custom active text color code |
| hideOnScroll | boolean | false | (optional) Hides the navigation bar when scrolling |
| style | React.CSSProperties | {} | (optional) Custom styles for the navigation container |
| className | string | "" | (optional) Custom class name for the navigation container |
$3
All item properties are optional. If no property is provided, the item will occupy space but remain empty.
| Prop | Type | Description |
|------------|-------------------------------|-----------------------------------------------------------------------------|
| title | string | (optional) Item title |
| icon | JSX.Element | (optional) Item icon |
| activeIcon | JSX.Element | (optional) Item active icon |
| onClick | function | (optional) Triggered when the item is clicked, returns the clicked item |
| render | ({ isActive: boolean; id: number }) => JSX.Element | (optional) Custom render function for the item |
| active | boolean | (optional) Custom active state control. If not provided, falls back to selected index behavior |
Usage
To use the component, provide an array of items representing the navigation options in the bar. Each item can include a title, an icon, or custom content using the render function.
Example:
`jsx
import React, { useState } from "react";
import { BottomNavigation } from "reactjs-bottom-navigation";
function App() {
const bottomNavItems = [
{
title: "Home",
onClick: ({ id }) => alert("Menu clicked " + id),
icon: ,
activeIcon:
},
{
title: "Search",
},
{
render: ({ isActive, id }) => isActive ? {id} : {id},
},
];
return (
items={bottomNavItems}
selected={0}
onItemClick={(item) => console.log(item)}
activeBgColor="slateBlue"
activeTextColor="white"
hideOnScroll={true}
className="custom-bottom-nav"
style={{ position: "fixed", bottom: 0, width: "100%" }}
/>
);
}
export default App;
`
Customization
The component offers multiple ways to customize:
$3
- Navigation container: bottom-nav
- Navigation items: bottom-nav-item
- Item titles: bottom-nav-item-title
- Active items: Add active class to bottom-nav-item
You can use activeBgColor, activeTextColor, and the className prop to further customize the appearance.
$3
Use the hideOnScroll prop to automatically hide the navigation bar when scrolling down.
$3
Use the render method in items` to define custom content for each navigation item.