# Navigation menu: Current page

> Links in the bar look like triggers. Mark the current page with `active`, which also sets `aria-current="page"`.

Example: https://hextaui.com/docs/navigation-menu/examples/active
Component docs: https://hextaui.com/docs/navigation-menu.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/navigation-menu-active.json
```

This adds `components/examples/navigation-menu/active.tsx` with the Navigation menu component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/navigation-menu/active.tsx"
import {
  NavigationMenu,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
} from "@/components/ui/navigation-menu"

const links = ["Overview", "Activity", "Settings"]

export function NavigationMenuActive() {
  return (
    <NavigationMenu aria-label="Project">
      <NavigationMenuList>
        {links.map((link) => (
          <NavigationMenuItem key={link}>
            <NavigationMenuLink href="#" active={link === "Activity"}>
              {link}
            </NavigationMenuLink>
          </NavigationMenuItem>
        ))}
      </NavigationMenuList>
    </NavigationMenu>
  )
}
```

## Props in this example

### NavigationMenuLink

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `active` | `boolean` | `false` | Marks the current page. |

## More Navigation menu examples

- [Dropdown](https://hextaui.com/docs/navigation-menu/examples/dropdown.md)
- [Right to left](https://hextaui.com/docs/navigation-menu/examples/rtl.md)