Blocks · Nav

Nav bars

Four navigation patterns — centered top-bar, split top-bar, a fixed bottom dock at orbit Z-tier, and a vertical .lsd-stack sidebar. Each ships with a live preview + a Copy-HTML snippet using real framework classes compiled in lsd-motion.css.

Centered top-bar

Brand stacked above links — symmetrical, editorial feel. Good for content-first sites.

.lsd-stack .lsd-row .lsd-center .lsd-z-raised

Split top-bar

Brand left, links adjacent, primary CTA pinned far-right. The workhorse SaaS nav.

.lsd-row .lsd-align-center .lsd-z-raised .lsd-fx--hover-lift

Bottom dock

Fixed to viewport bottom, floats at orbit Z-tier. Native-app feel for mobile-first marketing or PWAs.

.lsd-z-orbit .lsd-row .lsd-fx--hover-lift

— page content —

Sidebar

Vertical .lsd-stack — fixed column, grouped link list. Apps & docs default.

.lsd-stack .lsd-gap-sm .lsd-z-base

Hamburger drawer

Brand left, hamburger right. Tap to slide a stacked nav drawer down. The default mobile pattern — switch to the Mobile viewport to see it land at home.

.lsd-stack .lsd-row data-open

Bottom tab bar

App-style fixed-bottom pill with 4 icon-and-label tabs. The active tab tints with the brand accent. Best paired with the Mobile viewport.

.lsd-z-orbit .lsd-row .lsd-fx--hover-lift

— app surface —