Clawscale

Navbar

A Navbar holds the app name, top-level navigation and global actions at the top of the screen.

Usage#

import { Navbar, NavbarDivider, NavbarGroup, NavbarHeading } from "@clawscale/react";

Use the top-level components. The nested aliases, such as Navbar.Group, are deprecated.

Examples#

App navbar#

NavbarGroup lays out its children in a row. align={Alignment.END} moves a group to the end. Use minimal buttons for navigation and actions.

Lakehouse
core/navbar/basic.tsx
import { Alignment, Button, InputGroup, Navbar, NavbarDivider, NavbarGroup, NavbarHeading } from "@clawscale/react";

export default function NavbarBasic() {
  return (
    <Navbar>
      <NavbarGroup>
        <NavbarHeading>Lakehouse</NavbarHeading>
        <NavbarDivider />
        <Button variant="minimal" icon="home" text="Home" />
        <Button variant="minimal" icon="flows" text="Pipelines" />
        <Button variant="minimal" icon="database" text="Datasets" />
      </NavbarGroup>
      <NavbarGroup align={Alignment.END}>
        <InputGroup aria-label="Search datasets" leftIcon="search" placeholder="Search datasets" type="search" />
        <NavbarDivider />
        <Button variant="minimal" icon="notifications" aria-label="Notifications" />
        <Button variant="minimal" icon="cog" aria-label="Settings" />
      </NavbarGroup>
    </Navbar>
  );
}

Fixed to top#

fixedToTop pins the navbar to the top of the viewport with position: fixed. Add top padding to body equal to the navbar height, 50px, or the navbar covers the top of the page. It is not shown here because it would cover this page.

Props interface#

Each component renders a <div> and accepts its HTML attributes.

interface NavbarProps extends Props, HTMLDivProps@clawscale/react
PropsDescription
children
React.ReactNode
className
string
A space-delimited list of class names to pass along to a child element.
Inherited from Props
fixedToTop
boolean
Whether this navbar should be fixed to the top of the viewport (using CSS position: fixed).
interface NavbarGroupProps extends Props, HTMLDivProps@clawscale/react
PropsDescription
align
Alignment = Alignment.START
The side of the navbar on which the group should appear. The Alignment enum provides constants for these values.
children
React.ReactNode
className
string
A space-delimited list of class names to pass along to a child element.
Inherited from Props
interface NavbarHeadingProps extends Props, HTMLDivProps@clawscale/react
PropsDescription
children
React.ReactNode
className
string
A space-delimited list of class names to pass along to a child element.
Inherited from Props
interface NavbarDividerProps extends Props, HTMLDivProps@clawscale/react
PropsDescription
className
string
A space-delimited list of class names to pass along to a child element.
Inherited from Props