Nav Component

The Nav component in goobs-frontend is a versatile navigation component that can be used to create both horizontal and vertical navigation menus. It provides a flexible structure for organizing navigation items, including support for nested menus, dropdowns, and search functionality.

Importing the Component

To use the Nav component in your project, import it from the goobs-frontend package:

import { Nav } from 'goobs-frontend';

Basic Usage

Here's a basic example of how to use the Nav component:

import React from 'react';
import { Nav } from 'goobs-frontend';

const NavExample: React.FC = () => {
  const items = [
    { title: 'Home', route: '/' },
    { title: 'About', route: '/about' },
    { title: 'Services', route: '/services' },
    { title: 'Contact', route: '/contact' },
  ];

  return (
    <Nav
      items={items}
      orientation="horizontal"
      height="60px"
      alignment="left"
    />
  );
};

export default NavExample;

Props

The Nav component accepts the following props:

• items: (NavProps | SubNav | View)[] - Array of navigation items
• showSearchbar: boolean (optional, default: true) - Flag to show/hide search bar
• showDropdown: boolean (optional, default: true) - Flag to show/hide dropdown
• showTitle: boolean (optional, default: true) - Flag to show/hide title
• showLine: boolean (optional, default: true) - Flag to show/hide divider line
• verticalNavTitle: string (optional, default: 'Navigation') - Title for vertical navigation
• dropdownLabel: string (optional, default: 'Select a nav') - Label for dropdown
• searchbarLabel: string (optional, default: 'Search your navs') - Label for search bar
• anchor: 'left' | 'right' (optional, default: 'left') - Position of vertical navigation
• orientation: 'vertical' | 'horizontal' - Orientation of navigation
• height: string (optional, default: '80px') - Height of navigation (for horizontal)
• alignment: 'left' | 'center' | 'right' | 'inherit' | 'justify' (optional, default: 'left') - Alignment of items (for horizontal)
• navname: string (optional) - Name of the navigation

Features

1. Flexible Orientation: Supports both horizontal and vertical navigation layouts.
2. Nested Menus: Allows for creation of multi-level navigation structures.
3. Search Functionality: Includes an optional search bar for navigating large menus.
4. Dropdown Support: Can display navigation items in a dropdown menu.
5. Customizable Styling: Supports custom alignment, height, and other styling options.
6. Accessibility: Includes proper ARIA attributes for screen readers.

Advanced Usage

Vertical Navigation with Nested Items

import React from 'react';
import { Nav } from 'goobs-frontend';

const VerticalNavExample: React.FC = () => {
  const items = [
    {
      title: 'Dashboard',
      route: '/dashboard',
      subnavs: [
        { title: 'Analytics', route: '/dashboard/analytics' },
        { title: 'Reports', route: '/dashboard/reports' },
      ],
    },
    {
      title: 'Users',
      route: '/users',
      subnavs: [
        { title: 'Manage Users', route: '/users/manage' },
        { title: 'User Roles', route: '/users/roles' },
      ],
    },
    { title: 'Settings', route: '/settings' },
  ];

  return (
    <Nav
      items={items}
      orientation="vertical"
      verticalNavTitle="Admin Panel"
      showSearchbar={true}
      showDropdown={false}
    />
  );
};

export default VerticalNavExample;

Horizontal Navigation with Custom Styling

import React from 'react';
import { Nav } from 'goobs-frontend';

const CustomHorizontalNavExample: React.FC = () => {
  const items = [
    { title: 'Home', route: '/' },
    { title: 'Products', route: '/products' },
    { title: 'About Us', route: '/about' },
    { title: 'Contact', route: '/contact' },
  ];

  return (
    <Nav
      items={items}
      orientation="horizontal"
      height="70px"
      alignment="center"
      showSearchbar={false}
      showDropdown={false}
    />
  );
};

export default CustomHorizontalNavExample;

Styling

The Nav component uses Material-UI components internally and can be styled using Material-UI's styling solutions. You can customize the appearance by passing style props to the Nav component or by using Material-UI's makeStyles or styled-components.

Accessibility

The Nav component is designed with accessibility in mind:

• It uses semantic HTML elements for navigation structures.
• Includes proper ARIA attributes for screen readers.
• Supports keyboard navigation for menu items.

To further enhance accessibility, ensure that your route names and labels are descriptive and meaningful.

Best Practices

1. Consistent Structure: Maintain a consistent navigation structure across your application.
2. Clear Labels: Use clear and concise labels for navigation items.
3. Limit Nesting: Avoid deep nesting of navigation items to prevent user confusion.
4. Mobile Considerations: Ensure your navigation is usable on mobile devices, possibly switching to a vertical layout on smaller screens.
5. Active State: Clearly indicate the active/current navigation item to orient users.

Performance Considerations

The Nav component is generally lightweight, but keep in mind:

• For large navigation structures, consider implementing lazy loading for nested items.
• If using the search functionality, implement efficient search algorithms for large navigation sets.

Troubleshooting

1. Items Not Displaying: Ensure the items prop is correctly formatted as an array of objects with the required properties.
2. Styling Issues: Check that you're not overriding essential styles that might break the layout.
3. Routing Problems: Verify that the route properties in your navigation items correspond to valid routes in your application.

By leveraging these features and following the best practices, you can create effective and user-friendly navigation structures in your goobs-frontend projects using the Nav component.