SiteNav

Floating pill navbar. Full-width at scroll 0, pill with border and shadow when scrolled. Logo, page links, login and register buttons.

8 tokens

Preview

import { SiteNav } from '@/components/site-nav'

<SiteNav />

This component reads these tokens directly: change one on a Foundations page and it updates here and across the site.

Background--ds-bg

#FFFFFF

Text primary--ds-text

#1E1E1E

Text muted--ds-text-muted

#6B7280

Border--ds-border

#E5E7EB

Accent--ds-accent

#00F15E

Content max width--ds-content-max

1920px

Content padding X--ds-content-px

5rem

Transition speed--ds-transition

300ms