Overview
Get Started
Navigation Menu
A collection of links and menus for website navigation.
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
export function NavigationMenuDemo() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Overview</NavigationMenuTrigger>
<NavigationMenuContent className="max-w-sm">
<ul className="grid grid-cols-2">
{overviewLinks.map((item) => (
<li key={item.href}>
<NavigationMenuLink href={item.href} className="flex-col items-start gap-0.5">
<h3 className="font-medium">{item.title}</h3>
<p className="text-muted-foreground">{item.description}</p>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Handbook</NavigationMenuTrigger>
<NavigationMenuContent className="max-w-sm">
<ul>
{handbookLinks.map((item) => (
<li key={item.href}>
<NavigationMenuLink href={item.href} className="flex-col items-start gap-0.5">
<h3 className="font-medium">{item.title}</h3>
<p className="text-muted-foreground">{item.description}</p>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="https://github.com/mui/base-ui" className="h-8">
GitHub
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}
const overviewLinks = [
{
href: "/react/overview/quick-start",
title: "Quick Start",
description: "Install and assemble your first component.",
},
{
href: "/react/overview/accessibility",
title: "Accessibility",
description: "Learn how we build accessible components.",
},
{
href: "/react/overview/releases",
title: "Releases",
description: "See what’s new in the latest Base UI versions.",
},
{
href: "/react/overview/about",
title: "About",
description: "Learn more about Base UI and our mission.",
},
] as const;
const handbookLinks = [
{
href: "/react/handbook/styling",
title: "Styling",
description:
"Base UI components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.",
},
{
href: "/react/handbook/animation",
title: "Animation",
description:
"Base UI components can be animated with CSS transitions, CSS animations, or JavaScript libraries.",
},
{
href: "/react/handbook/composition",
title: "Composition",
description:
"Base UI components can be replaced and composed with your own existing components.",
},
] as const;Installation
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
import { IconCaretDownFilled, IconCaretRightFilled } from "@tabler/icons-react";
import { cn } from "@/lib/cn";
function NavigationMenu({
children,
className,
showArrow = true,
portalProps,
positionerProps = {
sideOffset: 8,
collisionPadding: { left: 16, right: 16 },
},
popupProps,
viewportProps,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
showArrow?: boolean;
portalProps?: React.ComponentProps<typeof NavigationMenuPortal>;
positionerProps?: React.ComponentProps<typeof NavigationMenuPositioner>;
popupProps?: React.ComponentProps<typeof NavigationMenuPopup>;
viewportProps?: React.ComponentProps<typeof NavigationMenuViewport>;
}) {
return (
<NavigationMenuPrimitive.Root
data-slot="navigation-menu"
className={cn("min-w-max", className)}
{...props}
>
{children}
<NavigationMenuPortal {...portalProps}>
<NavigationMenuPositioner {...positionerProps}>
<NavigationMenuPopup {...popupProps}>
{showArrow && <NavigationMenuArrow />}
<NavigationMenuViewport {...viewportProps} />
</NavigationMenuPopup>
</NavigationMenuPositioner>
</NavigationMenuPortal>
</NavigationMenuPrimitive.Root>
);
}
function NavigationMenuList({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
return (
<NavigationMenuPrimitive.List
data-slot="navigation-menu-list"
className={cn("relative flex gap-px", className)}
{...props}
/>
);
}
function NavigationMenuItem({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
return (
<NavigationMenuPrimitive.Item
data-slot="navigation-menu-item"
className={cn("relative", className)}
{...props}
/>
);
}
function NavigationMenuTrigger({
children,
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
return (
<NavigationMenuPrimitive.Trigger
data-slot="navigation-menu-trigger"
className={cn(
"inline-flex h-8 select-none items-center justify-center gap-1.5 rounded-lg px-2.5 font-medium text-sm hover:bg-accent focus-visible:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3",
className
)}
{...props}
>
{children}
<NavigationMenuIcon>
<IconCaretDownFilled />
</NavigationMenuIcon>
</NavigationMenuPrimitive.Trigger>
);
}
function NavigationMenuIcon({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Icon>) {
return (
<NavigationMenuPrimitive.Icon
data-slot="navigation-menu-icon"
className={cn("transition-transform duration-200 data-popup-open:rotate-180", className)}
{...props}
/>
);
}
function NavigationMenuContent({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
return (
<NavigationMenuPrimitive.Content
data-slot="navigation-menu-content"
className={cn(
"h-full max-h-(--available-height) w-[calc(100vw-40px)] p-2 transition-[opacity,transform,translate,filter] duration-(--duration) ease-(--easing) data-ending-style:data-[activation-direction=left]:translate-x-1/2 data-ending-style:data-[activation-direction=right]:-translate-x-1/2 data-starting-style:data-[activation-direction=left]:-translate-x-1/2 data-starting-style:data-[activation-direction=right]:translate-x-1/2 data-ending-style:data-[activation-direction=down]:-translate-y-18 data-ending-style:data-[activation-direction=up]:translate-y-18 data-starting-style:data-[activation-direction=down]:translate-y-18 data-starting-style:data-[activation-direction=up]:-translate-y-18 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:blur-[2px] data-starting-style:blur-in-[2px]",
className
)}
{...props}
/>
);
}
function NavigationMenuPortal(props: React.ComponentProps<typeof NavigationMenuPrimitive.Portal>) {
return <NavigationMenuPrimitive.Portal data-slot="navigation-menu-portal" {...props} />;
}
function NavigationMenuPositioner({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Positioner>) {
return (
<NavigationMenuPrimitive.Positioner
data-slot="navigation-menu-positioner"
className={cn(
"[--duration:0.35s] [--easing:cubic-bezier(0.22,1,0.36,1)]",
"h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) data-instant:transition-none",
className
)}
{...props}
/>
);
}
function NavigationMenuViewport({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
return (
<NavigationMenuPrimitive.Viewport
data-slot="navigation-menu-viewport"
className={cn("relative size-full overflow-hidden", className)}
{...props}
/>
);
}
function NavigationMenuPopup({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Popup>) {
return (
<NavigationMenuPrimitive.Popup
data-slot="navigation-menu-popup"
className={cn(
"relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-2xl border bg-popover text-popover-foreground outline-none transition-[opacity,transform,width,height,scale] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-starting-style:scale-90 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-150 data-ending-style:ease-[ease]",
className
)}
{...props}
/>
);
}
function NavigationMenuArrow({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Arrow>) {
return (
<NavigationMenuPrimitive.Arrow
data-slot="navigation-menu-arrow"
className={cn(
"relative block h-1.5 w-3 overflow-clip transition-[left,right] duration-(--duration) ease-(--easing) before:absolute before:bottom-0 before:left-1/2 before:block before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:-translate-x-1/2 before:translate-y-1/2 before:rotate-45 before:border before:border-border before:bg-popover before:content-[''] data-[side=bottom]:-top-1.5 data-[side=left]:-right-2.25 data-[side=top]:-bottom-1.5 data-[side=right]:-left-2.25 data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180",
className
)}
{...props}
/>
);
}
function NavigationMenuLink({
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
return (
<NavigationMenuPrimitive.Link
data-slot="navigation-menu-link"
className={cn(
"flex items-center gap-2 rounded-lg p-2 text-sm hover:bg-muted focus-visible:outline-2 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
/>
);
}
function NavigationSubMenu({
children,
positionerProps = {
align: "end",
side: "right",
alignOffset: -8,
sideOffset: 8,
},
portalProps,
popupProps,
viewportProps,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
positionerProps?: React.ComponentProps<typeof NavigationMenuPositioner>;
portalProps?: React.ComponentProps<typeof NavigationMenuPortal>;
popupProps?: React.ComponentProps<typeof NavigationMenuPopup>;
viewportProps?: React.ComponentProps<typeof NavigationMenuViewport>;
}) {
return (
<NavigationMenuPrimitive.Root data-slot="navigation-sub-menu" {...props}>
{children}
<NavigationMenuPortal {...portalProps}>
<NavigationMenuPositioner {...positionerProps}>
<NavigationMenuPopup {...popupProps}>
<NavigationMenuViewport {...viewportProps} />
</NavigationMenuPopup>
</NavigationMenuPositioner>
</NavigationMenuPortal>
</NavigationMenuPrimitive.Root>
);
}
function NavigationSubMenuTrigger({
children,
className,
...props
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
return (
<NavigationMenuPrimitive.Trigger
data-slot="navigation-menu-trigger"
className={cn(
"flex w-full items-center gap-1 rounded-lg p-2 text-left font-medium text-sm hover:bg-muted focus-visible:outline-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3",
className
)}
{...props}
>
{children}
<NavigationMenuIcon className="ml-auto">
<IconCaretRightFilled />
</NavigationMenuIcon>
</NavigationMenuPrimitive.Trigger>
);
}
function NavigationInlineSubMenu(props: React.ComponentProps<typeof NavigationMenuPrimitive.Root>) {
return <NavigationMenuPrimitive.Root data-slot="navigation-inline-sub-menu" {...props} />;
}
export {
NavigationMenu,
NavigationMenuList,
NavigationMenuItem,
NavigationMenuTrigger,
NavigationMenuIcon,
NavigationMenuContent,
NavigationMenuPortal,
NavigationMenuPositioner,
NavigationMenuViewport,
NavigationMenuPopup,
NavigationMenuArrow,
NavigationMenuLink,
NavigationSubMenu,
NavigationSubMenuTrigger,
NavigationInlineSubMenu,
};Examples
With submenus
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationSubMenu,
NavigationSubMenuTrigger,
} from "@/components/ui/navigation-menu";
export function NavigationMenuDemo() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Overview</NavigationMenuTrigger>
<NavigationMenuContent className="max-w-sm">
<ul className="grid grid-cols-2">
{overviewLinks.map((item) => (
<li key={item.href}>
<NavigationMenuLink href={item.href} className="flex-col items-start gap-0.5">
<span className="font-medium">{item.title}</span>
<p className="text-muted-foreground">{item.description}</p>
</NavigationMenuLink>
</li>
))}
<li>
<NavigationSubMenu>
<NavigationMenuItem>
<NavigationSubMenuTrigger>
<div className="flex flex-col items-start gap-0.5">
<div className="font-medium">Handbook</div>
<div className="text-muted-foreground">How to use Base UI effectively.</div>
</div>
</NavigationSubMenuTrigger>
<NavigationMenuContent className="max-w-sm">
<ul>
{handbookLinks.map((item) => (
<li key={item.href}>
<NavigationMenuLink
href={item.href}
className="flex-col items-start gap-0.5"
>
<h3 className="font-medium">{item.title}</h3>
<p className="text-muted-foreground">{item.description}</p>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationSubMenu>
</li>
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}
const overviewLinks = [
{
href: "/react/overview/quick-start",
title: "Quick Start",
description: "Install and assemble your first component.",
},
{
href: "/react/overview/accessibility",
title: "Accessibility",
description: "Learn how we build accessible components.",
},
{
href: "/react/overview/releases",
title: "Releases",
description: "See what’s new in the latest Base UI versions.",
},
] as const;
const handbookLinks = [
{
href: "/react/handbook/styling",
title: "Styling",
description:
"Base UI components can be styled with plain CSS, Tailwind CSS, CSS-in-JS, or CSS Modules.",
},
{
href: "/react/handbook/animation",
title: "Animation",
description:
"Base UI components can be animated with CSS transitions, CSS animations, or JavaScript libraries.",
},
{
href: "/react/handbook/composition",
title: "Composition",
description:
"Base UI components can be replaced and composed with your own existing components.",
},
] as const;Nested inline submenus
"use client";
import { useMediaQuery } from "@base-ui/react/unstable-use-media-query";
import {
NavigationInlineSubMenu,
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
NavigationSubMenuTrigger,
} from "@/components/ui/navigation-menu";
export function NavigationMenuDemo() {
const isDesktop = useMediaQuery("(min-width: 700px)", { defaultMatches: true });
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Product</NavigationMenuTrigger>
<NavigationMenuContent className="max-w-2xl p-0">
<NavigationInlineSubMenu
orientation={isDesktop ? "vertical" : "horizontal"}
defaultValue="developers"
>
<div className="grid grid-cols-1 overflow-hidden min-[700px]:grid-cols-[13rem_minmax(0,1fr)]">
<NavigationMenuList className="overflow-x-auto p-2 md:flex-col md:overflow-y-clip md:overflow-x-visible md:border-r">
{audienceMenus.map((menu) => (
<NavigationMenuItem key={menu.value} value={menu.value}>
<NavigationSubMenuTrigger>
<div className="flex flex-col gap-0.5">
<span className="font-medium">{menu.label}</span>
<span className="text-muted-foreground">{menu.hint}</span>
</div>
</NavigationSubMenuTrigger>
<NavigationMenuContent className="flex w-auto flex-col gap-4 p-4">
<div>
<h4 className="font-medium text-base">{menu.title}</h4>
<p className="text-muted-foreground text-sm">{menu.description}</p>
</div>
<ul className="-mx-2">
{menu.links.map((link) => (
<li key={link.href}>
<NavigationMenuLink
href={link.href}
className="flex-col items-start gap-0.5"
>
<h5 className="font-medium">{link.title}</h5>
<p className="text-muted-foreground">{link.description}</p>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
))}
</NavigationMenuList>
<NavigationMenuViewport />
</div>
</NavigationInlineSubMenu>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Learn</NavigationMenuTrigger>
<NavigationMenuContent className="max-w-md p-4 pb-2">
<div className="flex flex-col gap-4">
<div>
<h4 className="font-normal text-base">{guidesPanel.title}</h4>
<p className="mt-1 text-muted-foreground text-sm">{guidesPanel.description}</p>
</div>
<ul className="-mx-2">
{guideLinks.map((link) => (
<li key={link.href}>
<NavigationMenuLink href={link.href} className="flex-col items-start gap-0.5">
<h5 className="m-0 font-normal text-sm leading-4">{link.title}</h5>
<p className="m-0 text-neutral-500 text-sm dark:text-neutral-400">
{link.description}
</p>
</NavigationMenuLink>
</li>
))}
</ul>
</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="/react/overview/releases" className="h-8">
Releases
</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="https://github.com/mui/base-ui" className="h-8">
GitHub
</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}
export const audienceMenus = [
{
value: "developers",
label: "Developers",
hint: "Go from idea to UI faster.",
title: "Build product UI without giving up control",
description:
"Start with accessible parts and shape them to your app instead of working around a preset design system.",
links: [
{
href: "/react/overview/quick-start",
title: "Quick start",
description: "Install Base UI and get your first interactive primitive on screen fast.",
},
{
href: "/react/handbook/composition",
title: "Composition",
description: "Wrap and combine parts to match your product structure without hacks.",
},
],
},
{
value: "systems",
label: "Design Systems",
hint: "Keep patterns aligned across teams.",
title: "Turn shared standards into working components",
description:
"Connect tokens, states, and accessibility rules once, then give every product team the same solid starting point.",
links: [
{
href: "/react/handbook/styling",
title: "Styling",
description: "Map tokens and component states to your own CSS or utility setup.",
},
{
href: "/react/overview/accessibility",
title: "Accessibility",
description: "Review keyboard support and semantic defaults before anything ships.",
},
{
href: "/react/components/tooltip",
title: "Tooltip",
description: "Set one clear pattern for lightweight help, hints, and field guidance.",
},
{
href: "/react/components/popover",
title: "Popover",
description: "Handle richer anchored panels like menus, inspectors, and onboarding.",
},
],
},
{
value: "managers",
label: "Engineering Leads",
hint: "Roll out shared UI without drag.",
title: "Give squads clear defaults and room to move",
description:
"Use the docs to align on quality bars, upgrades, and extension points while still leaving teams space to customize.",
links: [
{
href: "/react/overview/releases",
title: "Releases",
description: "Track version changes and migration notes before upgrades surprise teams.",
},
{
href: "/react/handbook/typescript",
title: "TypeScript",
description: "See how the primitives type custom wrappers and shared abstractions.",
},
{
href: "/react/handbook/forms",
title: "Forms",
description: "Standardize validation and field patterns teams reach for constantly.",
},
],
},
{
value: "startups",
label: "Startups",
hint: "Ship polished basics while things change.",
title: "Get sturdy UI foundations in place early",
description:
"Cover the hard interaction details now so your team can spend more time on the product ideas that actually differentiate you.",
links: [
{
href: "/react/overview/quick-start",
title: "Quick start",
description: "Get the package installed and your first component working in minutes.",
},
{
href: "/react/components/menu",
title: "Menu",
description: "Add action menus with keyboard support and focus handling already done.",
},
{
href: "/react/components/dialog",
title: "Dialog",
description: "Launch settings or upgrade flows without rebuilding focus management.",
},
],
},
] as const;
export const guidesPanel = {
title: "Where teams usually start",
description:
"These are the docs people reach for first when they are turning a prototype into shared UI.",
} as const;
export const guideLinks = [
{
href: "/react/overview/accessibility",
title: "Accessibility handbook",
description: "Take a practical pass over focus order, semantics, and keyboard support.",
},
{
href: "/react/handbook/composition",
title: "Composition handbook",
description: "Learn when to wrap parts, share behavior, and expose flexible APIs.",
},
{
href: "/react/handbook/styling",
title: "Styling handbook",
description: "Apply tokens and state styles without fighting the underlying markup.",
},
] as const;Custom Links
The <NavigationMenu.Link> part can be customized to render the link from your framework using the render prop to enable client-side routing.
import Link from "next/link";
import { NavigationMenuLink } from "@/components/ui/navigation-menu";
function NextLink(props: React.ComponentProps<typeof NavigationMenuLink>) {
return <NavigationMenuLink render={<Link href={props.href} />} {...props} />;
}Large menus
import {
NavigationMenu,
NavigationMenuContent,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";
export function NavigationMenuDemo() {
return (
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Services</NavigationMenuTrigger>
<NavigationMenuContent className="no-scrollbar max-h-96 max-w-sm overflow-y-auto">
<ul className="grid grid-cols-2">
{servicesLinks.map((item) => (
<li key={item.href}>
<NavigationMenuLink href={item.href} className="flex-col items-start gap-0.5">
<h3 className="font-medium">{item.title}</h3>
<p className="text-muted-foreground">{item.description}</p>
</NavigationMenuLink>
</li>
))}
</ul>
</NavigationMenuContent>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
);
}
const servicesLinks = [
{
href: "/services/analytics",
title: "Analytics",
description: "Insights and reporting to help you grow.",
},
{
href: "/services/consulting",
title: "Consulting",
description: "Expert guidance to solve complex problems.",
},
{ href: "/services/design", title: "Design", description: "Product and visual design services." },
{
href: "/services/development",
title: "Development",
description: "Custom software development and integrations.",
},
{
href: "/services/cloud",
title: "Cloud Services",
description: "Scalable cloud infrastructure and management.",
},
{
href: "/services/security",
title: "Security",
description: "Protection, audits, and compliance services.",
},
{
href: "/services/support",
title: "Support",
description: "Dedicated support and maintenance plans.",
},
{
href: "/services/marketing",
title: "Marketing",
description: "Growth marketing and acquisition strategies.",
},
{ href: "/services/seo", title: "SEO", description: "Improve visibility and organic traffic." },
{
href: "/services/content",
title: "Content",
description: "Content strategy, creation, and distribution.",
},
{
href: "/services/training",
title: "Training",
description: "Workshops and training for teams.",
},
{
href: "/services/automation",
title: "Automation",
description: "Automate workflows to increase efficiency.",
},
{
href: "/services/integration",
title: "Integrations",
description: "Connect tools and streamline data flows.",
},
{
href: "/services/mobile",
title: "Mobile",
description: "Native and cross-platform mobile apps.",
},
{
href: "/services/qa",
title: "QA & Testing",
description: "Quality assurance and testing services.",
},
{
href: "/services/architecture",
title: "Architecture",
description: "System and solution architecture design.",
},
{
href: "/services/devops",
title: "DevOps",
description: "CI/CD, monitoring, and infrastructure as code.",
},
{
href: "/services/data",
title: "Data Engineering",
description: "Data pipelines, warehousing, and ETL.",
},
{
href: "/services/ai",
title: "AI & ML",
description: "Machine learning models and AI integrations.",
},
{
href: "/services/compliance",
title: "Compliance",
description: "Regulatory compliance and risk management.",
},
];