The Navigation Menu is an interactive component that allows you to create a navigation list with links and dropdowns. It is a very flexible component that can be used in many different ways.
The most characteristic feature of the Navigation Menu is the ability to collapse and expand submenus with more options. In pol-ui we implemented a modern pattern of animations based on the radix-ui library to make the experience of using the Navigation Menu more pleasant.
All interactivity and options are handled by using React properties and you can customise the appearance of the navbar using the classes from Tailwind CSS.
To start using the navbar component you need to import it from Pol-ui:
import { NavigationMenu } from "pol-ui";Default NavigationMenu
Default NavigationMenu
import { NavigationMenu } from "pol-ui";
const NavigationMenuComponent = () => {
return (
<NavigationMenu>
<NavigationMenuItem>
<NavigationMenuTrigger>Learn</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
<li className="row-span-3 grid">
<NavigationMenuLink asChild>
<a
className="focus:shadow-md from-primary to-primary/20 flex
h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-br p-[25px] no-underline outline-none"
href="/"
>
<div className="mt-4 text-3xl font-medium leading-[1.2] text-black dark:text-white">
Pol-ui
</div>
<p className="text-mauve4 text-[14px] leading-[1.3]">
A styled wrapper for your navigation
</p>
</a>
</NavigationMenuLink>
</li>
<ListItem href="#" title="Styled">
Powered with Tailwind CSS and Radix.
</ListItem>
<ListItem href="#" title="Composable">
A detail component, already included in the navbar.
</ListItem>
<ListItem href="#" title="Animation">
All animations are running in css, quite smooth.
</ListItem>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Overview</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
<ListItem title="Introduction" href="#">
A component ready for your exigences.
</ListItem>
<ListItem title="Features" href="#">
This is a children, you can put anything here.
</ListItem>
<ListItem title="Usage" href="#">
The component is fully customizable.
</ListItem>
<li className="row-span-3 grid">
<NavigationMenuLink asChild>
<a
className="focus:shadow-md from-primary to-primary/20 flex
h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-br p-[25px] no-underline outline-none"
href="/"
>
<div className="mt-4 text-3xl font-medium leading-[1.2] text-black dark:text-white">
Pol-ui
</div>
<p className="text-mauve4 text-[14px] leading-[1.3]">
A styled wrapper for your navigation
</p>
</a>
</NavigationMenuLink>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Account</NavigationMenuTrigger>
<NavigationMenuContent>
<ul className="grid p-6 sm:w-[500px] sm:grid-cols-[0.50fr_1fr] gap-6">
<h3>Login</h3>
<div className="flex flex-col gap-2">
<Input
placeholder="Your name"
defaultValue={"polui"}
label="Your name"
/>
<Input
placeholder="Your email"
defaultValue={"pol@ui.com"}
label="Your email"
/>
</div>
<h3>Security</h3>
<div className="flex flex-col gap-2">
<Checkbox defaultChecked label="Sell my data please" />
</div>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink active href="#">
Github
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenu>
);
};
export default NavigationMenuComponent;Structure
<NavigationMenu>
// If it's a dropdown
<NavigationMenuItem>
<NavigationMenuTrigger></NavigationMenuTrigger>
<NavigationMenuContent></NavigationMenuContent>
</NavigationMenuItem>
// If it's a link
<NavigationMenuItem>
<NavigationMenuLink></NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenu>💡
NavigationMenuLink is important to ensure the correct behavior of the component. It is a wrapper for the anchor tag and it is responsible for the accessibility of the component.
Props
NavigationMenu Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The children of the component. |
| hasIndicator | boolean | true | If true, the component will show an indicator when the menu is open. |
| listClassName | string | '' | The class name of the list. |
| theme | NavigationMenuThemeRoot | The theme of the component. |
NavigationMenuTrigger Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The children of the component. |
| className | string | '' | The class name of the component. |
| icon | FC<ComponentProps<'svg'>> | TbChevronDown | The icon of the component. |
| theme | NavigationMenuTriggerTheme | The theme of the component. |
💡
You can also provide any prop comming from the HTML button tag.
NavigationMenuTrigger Props
| Prop name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | The children of the component. |
| className | string | '' | The class name of the component. |
| theme | NavigationMenuContentTheme | The theme of the component. |
Theme
To learn more about how to customize the appearance of components, please see the Theme docs.
interface NavigationMenuTheme {
root: NavigationMenuThemeRoot;
trigger: NavigationMenuTriggerTheme;
content: NavigationMenuContentTheme;
}
interface NavigationMenuThemeRoot {
base: string;
}
interface NavigationMenuTriggerTheme {
base: string;
icon: string;
}
interface NavigationMenuContentTheme {
base: string;
}