Top Nav | astryx-vue

Usage

TopNav is the navigation landmark across the top of a page. heading, start, the default slot, and center run from the leading edge, and end stays at the trailing edge. TopNavHeading can show a logo, a line above the title, a line below it, and a menu. TopNavMenu opens a menu. TopNavMegaMenu opens a larger panel with items and a featured card. The card can show an image, and its action is its own link. Arrow keys move through the items and Escape closes the panel.

Pass mobileQuery and, when it matches, the leading and center content moves into MobileNav. The bar keeps the heading, the end slot, and the toggle. A slot is not rendered in both places at once.

vue

<script setup lang="ts">
import { TopNav, TopNavHeading, TopNavMenu } from '@astryx-vue/core/TopNav'
</script>

<template>
  <TopNav mobile-query="(max-width: 800px)">
    <template #heading>
      <TopNavHeading heading="Northwind" href="/" />
    </template>
    <TopNavMenu label="Product" :items="[{ label: 'Analytics', href: '/analytics' }]" />
  </TopNav>
</template>

Anatomy

Element	Description
Product icon and name	Identifies the product in the navigation bar.
Navigation items	Primary links for product-level destinations.
More menu	Overflow menu for additional navigation items.
Flex area	Flexible region for search, primary action buttons, or other controls.

Best practices

Guidance	Practice
Do	Give menu items an `href`. ArrowDown opens, arrows move, Escape closes.
Do	Use `mobileQuery` on small screens instead of copying the same links into a drawer.
Avoid	Do not put a form in the mega menu. It is navigation, not a dialog.

Examples

Centered navigation

Nav items sit in the center. The heading stays at the start, and actions stay at the end.

Enterprise dashboard

Icon-labeled items, search, a notification, and a primary action.

Hover menu

Hover opens a product menu with icons and descriptions.

Mega menu

A full-width mega menu with product items. The featured card shows an image, and the action at the bottom is its own link.

Heading with menu

The heading shows the suite, the product, and the account. The suite is its own link, and the chevron opens the product menu.

Multiple dropdowns

Several hover menus share one bar and close when the pointer moves to another.

With logo

A product mark sits in front of the heading, with a profile action at the end.

Usage ​