7ebff31475
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
86 lines
3.2 KiB
Plaintext
86 lines
3.2 KiB
Plaintext
---
|
|
status: "published"
|
|
|
|
label: "Bordered Navigation Menu"
|
|
title: "Bordered Navigation Menu Component in the Next.js Supabase SaaS kit"
|
|
description: "Learn how to use the Bordered Navigation Menu component in the Next.js Supabase SaaS kit"
|
|
order: 8
|
|
---
|
|
|
|
|
|
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
|
|
|
|
```jsx
|
|
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
|
|
|
|
```jsx
|
|
<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. |