Headers

Header with search

A search field in the actions slot for a docs or commerce site, with a keyboard hint so people learn the shortcut.

9 components36 linesServer safeSource on GitHub

Live demo

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

What it uses

Button Input Kbd Navbar NavbarActions NavbarBrand NavbarLink NavbarLinks NavbarToggle

Imports

import { Button, Input, Kbd, 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,
  Input,
  Kbd,
  Navbar,
  NavbarActions,
  NavbarBrand,
  NavbarLink,
  NavbarLinks,
  NavbarToggle,
} from '@the_viveksingh/vivek-ui'

export default function HeaderWithSearch() {
  return (
    <Navbar bordered container="xl">
      <NavbarBrand href="#">Docs</NavbarBrand>
      <NavbarToggle />
      <NavbarLinks>
        <NavbarLink active href="#">
          Guides
        </NavbarLink>
        <NavbarLink href="#">API</NavbarLink>
        <NavbarLink href="#">Examples</NavbarLink>
      </NavbarLinks>
      <NavbarActions>
        <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
          <Input aria-label="Search the docs" placeholder="Search…" size="sm" type="search" />
          <Kbd style={{ position: 'absolute', insetInlineEnd: '0.5rem' }}>⌘K</Kbd>
        </div>
        <Button size="sm" variant="ghost">
          GitHub
        </Button>
      </NavbarActions>
    </Navbar>
  )
}

← All 62 blocks