Sheet 02.03 / Components · Layout

TopBar

The site bar: the mark and the handwritten name on the left, section links and one button on the right. The current section carries aria-current and an underline.

CLASSb-topbarDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — topbarlive, on a 768 rail

every page / top

Anatomy

Parts

Part	Class	Notes
Bar	`.b-topbar`	A row in the rail, space-between.
Brand	`.b-brand`	mark.svg at 28px and the name in Caveat.
Nav	`.b-nav`	Section links; the current one is underlined.
Button	`.b-btn`	The only button on most pages. Drops below 380px wide.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-pad b-topbar">
      <a class="b-brand" href="#home"><img src="/brand/mark.svg" alt=""><span>Boluo</span></a>
      <nav class="b-nav" aria-label="Main">
        <a href="#sheets">Sheets</a>
        <a href="#components" aria-current="page">Components</a>
        <a class="b-btn" href="#start">Start</a>
      </nav>
    </div>
  </div>
</div>

Pass the current route and set aria-current on its link.
Use mark.svg on paper, always at 28px.

Don't

Use the dark or mono mark on paper.
Add a second button to the bar.