Headers

Large header

size="lg" for a taller bar with a logo mark and wordmark, the kind a publication or agency site wants.

7 components35 linesServer safeSource on GitHub

Live demo

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

What it uses

ButtonNavbarNavbarActionsNavbarBrandNavbarLinkNavbarLinksNavbarToggle

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 HeaderLargeBrand() {
  return (
    <Navbar bordered container="lg" size="lg" layout="end">
      <NavbarBrand href="#">
        <svg aria-hidden="true" height="28" viewBox="0 0 28 28" width="28">
          <rect fill="var(--vk-color-primary)" height="28" rx="8" width="28" />
          <path d="M8 18l6-10 6 10" fill="none" stroke="#fff" strokeWidth="2.5" />
        </svg>
        <span>Atelier &amp; Co.</span>
      </NavbarBrand>
      <NavbarToggle />
      <NavbarLinks>
        <NavbarLink active href="#">
          Product
        </NavbarLink>
        <NavbarLink href="#">Pricing</NavbarLink>
        <NavbarLink href="#">Docs</NavbarLink>
        <NavbarLink href="#">Blog</NavbarLink>
      </NavbarLinks>
      <NavbarActions>
        <Button variant="outline">Start a project</Button>
      </NavbarActions>
    </Navbar>
  )
}
← All 62 blocks