Bordered Navigation Menu Component in the Next.js Supabase SaaS kit

The BorderedNavigationMenu components provide a stylish and interactive navigation menu with a bordered, underline-style active state indicator. These components are built on top of the NavigationMenu from Shadcn UI and are designed to work seamlessly with Next.js routing.

BorderedNavigationMenu

This component serves as a container for navigation menu items.

Usage

import { BorderedNavigationMenu, BorderedNavigationMenuItem } from '@kit/ui/bordered-navigation-menu';
function MyNavigation() {
  return (
    <BorderedNavigationMenu>
      <BorderedNavigationMenuItem path="/home" label="Home" />
      <BorderedNavigationMenuItem path="/about" label="About" />
      {/* Add more menu items as needed */}
    </BorderedNavigationMenu>
  );
}

Props

• children: React.ReactNode: The navigation menu items to be rendered.

BorderedNavigationMenuItem

This component represents an individual item in the navigation menu.

Props

• path: string (required): The URL path for the navigation item.
• label: React.ReactNode | string (required): The text or content to display for the item.
• end?: boolean | ((path: string) => boolean): Determines if the path should match exactly or use a custom function for active state.
• active?: boolean: Manually set the active state of the item.
• className?: string: Additional CSS classes for the menu item container.
• buttonClassName?: string: Additional CSS classes for the button element.

Features

1. Automatic Active State: Uses Next.js's usePathname to automatically determine if the item is active based on the current route.
2. Custom Active State Logic: Allows for custom active state determination through the end prop.
3. Internationalization: Supports i18n through the Trans component for string labels.
4. Styling: Utilizes Tailwind CSS for styling, with active items featuring an underline animation.

Example

<BorderedNavigationMenuItem
  path="/dashboard"
  label="common:dashboardLabel"
  end={true}
  className="my-custom-class"
  buttonClassName="px-4 py-2"
/>

Styling

The components use Tailwind CSS for styling. Key classes include:

• Menu container: relative h-full space-x-2
• Menu item button: relative active:shadow-sm
• Active indicator: absolute -bottom-2.5 left-0 h-0.5 w-full bg-primary animate-in fade-in zoom-in-90

You can further customize the appearance by passing additional classes through the className and buttonClassName props.

Best Practices

1. Use consistent labeling and paths across your application.
2. Leverage the Trans component for internationalization of labels.
3. Consider the end prop for more precise control over the active state for nested routes.
4. Use the active prop sparingly, preferring the automatic active state detection when possible.

These components provide a sleek, accessible way to create navigation menus in your Next.js application, with built-in support for styling active states and internationalization.