# Top Nav Heading

## Usage

Product/suite/account heading for the `TopNav` heading slot. Supports smart interaction boundary logic: logo, heading text, superheading/subheading with independent links, and an optional menu popover with automatic chevron indicator.

```ts
import { TopNavHeading } from '@astryx-vue/core/TopNav'
```

## Examples

Common configurations, variations, and states.

### Basic

A product heading with a logo inside a TopNav, linked to the home page. Use as the leading brand element of a top navigation bar.

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

<template>
  <TopNav label="Product navigation">
    <template #heading>
      <TopNavHeading heading="Acme Platform" heading-href="#home">
        <template #logo>
          <NavIcon icon-class="i-carbon-cube" />
        </template>
      </TopNavHeading>
    </template>
  </TopNav>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `string` | — | Product/app name displayed as the primary heading text. |
| `href` | `string` | — | Alias of `headingHref`, so the top bar and the side nav heading take the same prop. `headingHref` wins when both are set. |
| `headingHref` | `string` | — | Link for the heading text (e.g. product home). When no menu is present and this is the only href, the whole heading becomes one clickable link. |
| `superheading` | `string` | — | Text above the heading (e.g. suite name). Rendered in a smaller secondary style. |
| `superheadingHref` | `string` | — | Link for the superheading text (e.g. suite home). When provided alongside a menu, renders as an independent inline link. |
| `subheading` | `string` | — | Text below the heading (e.g. account context). Rendered in a smaller secondary style. |
| `subheadingHref` | `string` | — | Link for the subheading text. When provided alongside a menu, renders as an independent inline link. |
| `logoLabel` | `string` | `heading` | Accessible name for the logo when it is a link of its own and there is no readable text beside it. Ignored when the logo is not a link. |
| `as` | `NavLinkComponent` | `'a'` | Custom link root component, such as `RouterLink`. Used only when there is an address. It receives the `href` and slot content. |

## Slots

- `logo`: logo rendered before the heading text. An image, a `NavIcon`, or any element.
- `icon`: same place as `logo`. `logo` wins when both are passed.
- `end`: content at the trailing edge of the heading row, such as a badge.
- `menu`: menu content shown in a popover. A chevron indicator appears automatically. With no href the whole header opens the menu; with hrefs the links are independent and the chevron area opens it. Receives `close` and `focusRequest`.