# Side Nav Heading

## Usage

Product/suite/account heading with smart interaction boundary logic for links and a menu popover.

Pass it to the `header` slot of a `SideNav`. `icon` goes before the text. `superheading` is the small line above the title and `subheading` the one below, and each line can carry its own link. A `menu` slot turns the text into a popover trigger with a chevron, while a plain `headingHref` with no menu makes the whole heading one link. `end` sits at the trailing edge.

```ts
import { SideNavHeading } from '@astryx-vue/core/SideNav'
```

## Examples

Common configurations, variations, and states.

### Basic

A SideNav header with an app icon and a linked title. Pass it to the SideNav header prop to identify the product or workspace at the top of the navigation rail.

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

<template>
  <SideNav>
    <template #header>
      <SideNavHeading heading="Analytics" heading-href="#home">
        <template #icon>
          <NavIcon icon-class="i-carbon-grid" />
        </template>
      </SideNavHeading>
    </template>
  </SideNav>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `string` | — | Product or app name. Also the accessible name of the icon-only heading shown while the rail is collapsed. Required. |
| `headingHref` | `string` | — | Link for the heading text, such as the product home. With no menu, the whole heading becomes one link. |
| `superheading` | `string` | — | Small line above the heading, such as the suite name. |
| `superheadingHref` | `string` | — | Link for the line above the heading. With a menu it stays an independent link. |
| `subheading` | `string` | — | Small line below the heading, such as the current account. |
| `subheadingHref` | `string` | — | Link for the line below the heading. With a menu it stays an independent link. |
| `logoLabel` | `string` | `heading` | Accessible name for the icon when it is a link of its own and no readable text sits beside it. |
| `as` | `NavLinkComponent` | `'a'` | Custom link root component, such as `RouterLink`. It receives the address as `to` as well. Used only when there is an address. |

## Slots

- `icon`: mark before the text. A `NavIcon`, an image, or any element. Collapsed, it becomes the whole heading.
- `menu`: popover content for the heading. A chevron appears automatically. Without an address the whole heading opens the menu; with one the links stay independent. Receives `close` and `focusRequest`.
- `end`: content at the trailing edge of the heading row, such as a badge.