nili/ui
enfaartr
All components

Topbar

Overview
10 exports1 variant axes21 props4 files
import { Topbar, TopbarUser } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

The bar

A logo slot, a row of items, and an actions slot at the end. label names the landmark — a page with a Topbar and a Sidebar has two navs, and “navigation, navigation” is not a landmark list.

import { Topbar, TopbarItem, TopbarUser, Icon } from "@nili/ui"
import { RiHome5Line, RiFolderLine } from "@remixicon/react"

export function Example() {
  return (
    <Topbar
      label="Main"
      logo={<PlaceholderLogo company="apex-financial" size="sm" label="Apex Financial" />}
      actions={
        <TopbarUser
          avatar={<Avatar size="xs" name="Ada Lovelace" tone="blue" />}
          name="Ada Lovelace"
        />
      }
    >
      <TopbarItem icon={<Icon icon={RiHome5Line} />} href="#">Home</TopbarItem>
      <TopbarItem icon={<Icon icon={RiFolderLine} />} href="#" active>
        Projects
      </TopbarItem>
    </Topbar>
  )
}

Item states

active marks the current page. menu adds the chevron for an item that opens a dropdown rather than navigating. href makes it a link; without one it renders as a button.

import { Topbar, TopbarItem } from "@nili/ui"

export function Example() {
  return (
    <Topbar label="Main">
      <TopbarItem href="#" active>Projects</TopbarItem>
      <TopbarItem href="#">Reports</TopbarItem>
      <TopbarItem menu>Workspace</TopbarItem>
      <TopbarItem disabled>Billing</TopbarItem>
    </Topbar>
  )
}

The actions slot

Anything that belongs at the end of the bar — search, notifications, a primary action, the account menu. It is a free slot rather than an enum, for the reason every other trailing slot in this system is.

search · notifications · action · account
3
import { Topbar, TopbarItem, TopbarUser, CompactButton, Button, Icon } from "@nili/ui"
import { RiSearchLine, RiNotification3Line } from "@remixicon/react"

export function Example() {
  return (
    <Topbar
      label="Main"
      actions={
        <>
          <CompactButton appearance="ghost" aria-label="Search">
            <Icon icon={RiSearchLine} />
          </CompactButton>
          <CompactButton appearance="ghost" aria-label="Notifications">
            <Icon icon={RiNotification3Line} />
          </CompactButton>
          <Button size="xs">New project</Button>
          <TopbarUser
            avatar={<Avatar size="xs" name="Ada Lovelace" tone="blue" />}
            name="Ada Lovelace"
          />
        </>
      }
    >
      …
    </Topbar>
  )
}