Skip to main content

Bottom Navigation Component

This document outlines the specifications for the BottomNavigationComponent, an Angular component designed to provide a navigation bar positioned at the bottom of the screen, typically used for navigating between primary sections or views within an application.

Purpose​

The BottomNavigationComponent serves as a convenient and accessible way for users to navigate between primary sections or views within an application. It enhances user experience by offering easy access to essential functionality while keeping navigation elements readily available at the bottom of the screen.

Usage​

Integrate the BottomNavigationComponent into your Angular applications to establish a consistent and user-friendly navigation interface positioned at the bottom of the screen.

Inputs​

  1. menuItems: (Required) An array of objects representing the items in the bottom navigation menu. Each object should have the following properties:

    • label: (Required) The label or display text for the menu item.
    • icon: (Optional) The icon to be displayed alongside the menu item label.
    • link: (Required) The URL or route link associated with the menu item.

  2. activeItem: (Optional) The label of the currently active menu item. Defaults to the label of the first menu item in the array.

  3. badge: (Optional) An object representing a badge or notification indicator for specific menu items. It should be structured as follows:

    • label: (Required) The label or text to be displayed within the badge.
    • menuLabel: (Required) The label of the menu item to which the badge is associated.

Events​

  1. itemClick: Fired when a menu item in the bottom navigation is clicked. Emits the selected menu item object.

Example​

<app-bottom-navigation
  [menuItems]="bottomNavItems"
  [activeItem]="activeNavItem"
  [badge]="notificationBadge"
  (itemClick)="onBottomNavigationItemClick($event)"
></app-bottom-navigation>

Notes​

  • Customize the styling and layout of the bottom navigation component to align with the overall design language and branding of your application.
  • Implement the itemClick event handler to respond to user interactions with the bottom navigation menu items.
  • Use the badge input to display notification indicators or badges for specific menu items, providing users with relevant updates or alerts.
// Example menu items for bottom navigation
bottomNavItems = [
  { label: 'Home', icon: 'home', link: '/home' },
  { label: 'Explore', icon: 'explore', link: '/explore' },
  { label: 'Favorites', icon: 'favorite', link: '/favorites' },
  { label: 'Profile', icon: 'person', link: '/profile' }
];

// Example active menu item
activeNavItem: string = 'Home';

// Example badge for notification indicator
notificationBadge = { label: '2', menuLabel: 'Favorites' };

onBottomNavigationItemClick(menuItem: any) {
  // Handle bottom navigation menu item click event
}