v0.0.3

Documentation version

Currently searching v0.0.3

Search pages, component props, utilities and tokens.

↑↓ to move to openesc to close

Open files in your editor

On a Mac, right-click the folder in Finder, hold Option, and choose Copy as Pathname.On Windows, hold Shift, right-click the folder, and choose Copy as path, then delete the quote marks.

ComponentsLumos 0.0.1UpdatedOpen 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

PropTypeDefaultWhat it does
renderbooleantrueSet to false to skip this component and everything inside it.
overlapbooleanfalseFixes 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.

The links are written in the component, in src/components/Global/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.