BottomNavigation

The BottomNavigation component is a UI element that anchors to the bottom of the screen, offering easy access to the primary sections of a mobile application. It's designed for mobile-first experiences where screen space is limited, making it crucial for keeping essential navigation at the user's fingertips. This component is ideal for apps that require constant navigation between a few core sections, such as e-commerce apps (Home, Categories, Cart, Profile) or media streaming apps (Home, Search, Library, Settings).

BottomNavItem

The BottomNavItem component represents a single item within a bottom navigation bar, which is commonly used in mobile applications. This component provides users with easy access to the most important sections of the app from any screen. Each BottomNavItem is typically accompanied by an icon and label, offering an intuitive way for users to navigate. Use cases include mobile apps like social networks, where quick access to the home feed, search, notifications, and profile is essential.

Page 1
Page 2
Page 4
Page 5

Code 

import { BottomNavigation, BottomNavItem } from "@lumina-design/core/BottomNavigation";

<BottomNavigation className='bottom-nav-demo'>
  <BottomNavItem
    active={true}
    icon={<i className='fas fa-user' />}
    onClick={() => alert("TESTING")}
  >
    Page 1
  </BottomNavItem>
  <BottomNavItem icon={<i className='fas fa-shield-virus' />}>
    Page 2
  </BottomNavItem>
  <BottomNavItem type='center' icon={<i className='fas fa-plus' />}>
    Page 3
  </BottomNavItem>
  <BottomNavItem icon={<i className='fas fa-hamburger' />}>
    Page 4
  </BottomNavItem>
  <BottomNavItem icon={<i className='fas fa-truck' />}>
    Page 5
  </BottomNavItem>
</BottomNavigation>