Headers

App header with account menu

An application header: product links, a feedback button and the signed-in user's avatar opening a dropdown menu.

9 components44 linesServer safeSource on GitHub

Live demo

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

What it uses

AvatarButtonDropdownMenuNavbarNavbarActionsNavbarBrandNavbarLinkNavbarLinksNavbarToggle

Imports

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

export default function HeaderWithAvatar() {
  return (
    <Navbar bordered container="full" size="sm">
      <NavbarBrand href="#">Ledger</NavbarBrand>
      <NavbarToggle />
      <NavbarLinks>
        <NavbarLink active href="#">
          Overview
        </NavbarLink>
        <NavbarLink href="#">Invoices</NavbarLink>
        <NavbarLink href="#">Customers</NavbarLink>
        <NavbarLink href="#">Reports</NavbarLink>
      </NavbarLinks>
      <NavbarActions>
        <Button size="sm" variant="ghost">
          Feedback
        </Button>
        <DropdownMenu align="end">
          <DropdownMenu.Trigger aria-label="Account menu" style={{ borderRadius: '50%' }}>
            <Avatar name="Priya Raman" size="sm" />
          </DropdownMenu.Trigger>
          <DropdownMenu.Content>
            <DropdownMenu.Item>Profile</DropdownMenu.Item>
            <DropdownMenu.Item>Billing</DropdownMenu.Item>
            <DropdownMenu.Separator />
            <DropdownMenu.Item>Sign out</DropdownMenu.Item>
          </DropdownMenu.Content>
        </DropdownMenu>
      </NavbarActions>
    </Navbar>
  )
}
← All 62 blocks