Site nav

The nav takes three named slots. koala-site-nav-brand holds the caller's brand link, koala-site-nav-links the destinations, drawn as pills in the desktop bar and as full-width rows in the phone menu, koala-site-nav-account an optional sign-in link on the right, and koala-site-nav-cta the call to action. Anything else, such as the theme toggle, sits beside the call to action from the small breakpoint up.

In a site it is full width and sticks under any banner. Here it sits inside the render box; the desktop bar switches on at the viewport's large breakpoint, not the box's, so on a narrow window the menu button shows instead. Open it to see the phone rows.

koala-site-nav-link goes on the caller's own <a>, so routing attributes such as x-target.push stay the caller's. active marks the current page with a filled pill and aria-current; external adds an outward arrow for a link that leaves the site, like the Tech site's design system link.