Headers

Floating header

variant="floating" insets the bar with a radius and a shadow, and keeps a matching offset when sticky.

7 components31 linesServer safeSource on GitHub

Live demo

Full width · the frame has its own viewport, so the breakpoints are real

What it uses

Button Navbar NavbarActions NavbarBrand NavbarLink NavbarLinks NavbarToggle

Imports

import { Button, Navbar, NavbarActions, NavbarBrand, NavbarLink, NavbarLinks, NavbarToggle } from '@the_viveksingh/vivek-ui'

The block

This is the file that renders the demo above, read at build time. Copy it into your project, change the words, and it runs — the only thing it needs is @the_viveksingh/vivek-ui and its stylesheet.

import {
  Button,
  Navbar,
  NavbarActions,
  NavbarBrand,
  NavbarLink,
  NavbarLinks,
  NavbarToggle,
} from '@the_viveksingh/vivek-ui'

export default function HeaderFloating() {
  return (
    <div style={{ background: 'var(--vk-color-surface)', paddingBlockEnd: '1rem' }}>
      <Navbar variant="floating" layout="center" container="lg" sticky>
        <NavbarBrand href="#">Overtone</NavbarBrand>
        <NavbarToggle />
        <NavbarLinks>
          <NavbarLink active href="#">
            Product
          </NavbarLink>
          <NavbarLink href="#">Pricing</NavbarLink>
          <NavbarLink href="#">Docs</NavbarLink>
          <NavbarLink href="#">Blog</NavbarLink>
        </NavbarLinks>
        <NavbarActions>
          <Button size="sm">Start free</Button>
        </NavbarActions>
      </Navbar>
    </div>
  )
}

← All 62 blocks