# Navigation Menu
{"Products"}
{"Analytics"}
{"Real-time insights"}
{"Automation"}
{"Workflow builders"}
{"Security"}
{"Enterprise-grade"}
{"Integrations"}
{"Connect tools"}
{"Solutions"}
{"Startups"}
{"Move fast"}
{"Enterprise"}
{"Scale securely"}
{"Agencies"}
{"Client delivery"}
{"E-commerce"}
{"Sell online"}
{"Resources"}
{"Docs"}
{"Get started"}
{"Blog"}
{"Latest updates"}
{"Support"}
{"Get help"}
{"Events"}
{"Upcoming webinars"}
{"Guides"}
{"Best practices"}
{"Contact"}
{"Talk to us"}
{"Company"}
{"About"}
{"Our story"}
{"Careers"}
{"Join the team"}
```astro --- --- Products
Analytics
Real-time insights
Automation
Workflow builders
Security
Enterprise-grade
Integrations
Connect tools
Solutions
Startups
Move fast
Enterprise
Scale securely
Agencies
Client delivery
E-commerce
Sell online
Resources
Docs
Get started
Blog
Latest updates
Support
Get help
Events
Upcoming webinars
Guides
Best practices
Contact
Talk to us
Company
About
Our story
Careers
Join the team
``` ## Installation ```bash bunx bejamas add navigation-menu ``` ```bash npx bejamas add navigation-menu ``` ```bash pnpm dlx bejamas add navigation-menu ``` ```bash yarn dlx bejamas add navigation-menu ``` ## Usage ```astro nocollapse --- --- Products
Analytics
Real-time insights
Automation
Workflow builders
Resources
Docs
Get started
Support
Get help
``` ## Props | Prop | Type | Default | |---|---|---| | class | `string` | `""` | | align | `"start" \| "center" \| "end"` | `"start"` | | viewport | `boolean` | `true` | | delayOpen | `number` | `0` | | delayClose | `number` | `0` | | openOnFocus | `boolean` | | ## Examples ### With Icons Links with Lucide icons for visual enhancement.
{"Features"}
{"Analytics"}
{"Track your metrics"}
{"Automation"}
{"Streamline workflows"}
{"Security"}
{"Enterprise-grade protection"}
```astro --- --- Features
Analytics
Track your metrics
Automation
Streamline workflows
Security
Enterprise-grade protection
``` ### Featured Card Hero-style layout with a featured item alongside regular links.
Getting Started
Introduction

Learn the basics and get up to speed quickly with our comprehensive guides.
Installation
Step-by-step setup
Configuration
Customize settings
Examples
Code samples
```astro --- --- Getting Started
Introduction

Learn the basics and get up to speed quickly with our comprehensive guides.
Installation
Step-by-step setup
Configuration
Customize settings
Examples
Code samples
``` ### With Simple Links Use `navigationMenuTriggerStyle()` to style regular links to match triggers.
{"Products"}
{"Product One"} {"Product Two"}
{" Pricing "} {" Docs "}
```astro --- --- Products
Product One Product Two
Pricing Docs ``` ### Without Viewport Set `viewport={false}` to render content directly without the animated viewport container.
{"Menu"}
{"Option One"} {"Option Two"}
```astro --- --- Menu
Option One Option Two
``` ## API Reference ### NavigationMenu Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `align` | `"start" \| "center" \| "end"` | `"start"` | Viewport alignment relative to the trigger row | | `viewport` | `boolean` | `true` | Enable animated viewport container for content | | `delayOpen` | `number` | `0` | Delay in ms before opening menu | | `delayClose` | `number` | `0` | Delay in ms before closing menu | | `openOnFocus` | `boolean` | `false` | Open menu on keyboard focus | ### NavigationMenuItem Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `value` | `string` | — | Unique identifier for the item | | `align` | `"start" \| "center" \| "end"` | `"start"` | Content alignment relative to trigger | ### Events | Event | Detail | Description | |-------|--------|-------------| | `navigation-menu:change` | `{ value: string \| null }` | Fired when active item changes | ### Programmatic Control ```js nocollapse // Open a specific item element.dispatchEvent( new CustomEvent("navigation-menu:set", { detail: { value: "products" } }) ); // Close the menu element.dispatchEvent( new CustomEvent("navigation-menu:set", { detail: { value: null } }) ); ```