SideNavTitle
The header's brand word, which gives way to the open SideNav's title on a phone: the logo stays, the word slides.
SourcePackage @kerf-js/veneer
Installation
npm install @kerf-js/veneerUsage
tsx
import { SideNavTitle } from '@kerf-js/veneer'When to use
Use it for
- A docs site whose SideNav opens below the header on a phone (`overlay="under"`)
Reach for something else
- SideNav, when the panel covers the header (`overlay="cover"`) and titles itself
Accessibility
- The title is
aria-hidden: the panel is already named by its landmark label.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
title | unknown | — | The open SideNav's title. |
children | unknown | — | What the header shows the rest of the time, usually the brand word (keep the logo outside it). |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="sidenav-title"] [data-part="home"]
hometitle
RelatedSide navHamburger menu