ComponentsLumos 0.0.1Open component
Nav
The site header: logo, links, and a menu that works on a phone.
Nav is rendered for you by BaseLayout, so most pages never mention it. It renders a <header> with the site logo, the link list, and a toggle that turns the list into a panel on narrow screens.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
overlap | boolean | false | Fixes the nav over the page rather than letting it sit in flow, so the first section starts underneath it. Give that section paddingTop="navoverlap" to clear the bar. |
The current page
The link matching the current URL is marked with aria-current="page", which is what both the styling and a screen reader use to say "you are here". Trailing slashes are ignored, so /about and /about/ are the same page.
Changing the links
The links are written in the component, in src/components/Nav.astro. Open it and edit the list: it is a plain <ul> of anchors, and adding one is adding a list item.
The height token
--nav-heightToken5remThe height the fixed nav reserves. is what everything else measures against: sticky offsets, the overlap padding, scroll margins on anchor targets. Change the height there rather than on the element.