Navbar

Navbars are top app bars with slots for multiple types of buttons, dropdowns, etc. It's intended to be easy to modify.

Example Instance

<NavBar
  navButtons={[
    <Button key="1" label="Home" variant="text" />,
    <Button key="2" label="About" variant="text" />,
    <Button key="3" label="Careers" variant="text" />,
  ]}
  iconButtons={[
    <IconButton key="search" icon="search" variant="text" color="surfacecontainer" />,
    <IconButton key="briefcase" icon="note" variant="text" color="surfacecontainer" />,
    <IconButton key="heart" icon="book" variant="text" color="surfacecontainer" />,
  ]}
  ctaButtons={[
    <Button key="secondary" label="Secondary" variant="outline" color="surface" />,
    <Button key="primary" label="Primary" variant="fill" color="surfacecontainer" />,
  ]}
/>

content_copy

warning

Note: The above snippet omits import statements and surrounding markup. It's assumed you'd be pasting this inside the return block of an existing functional component.

Installation

Next.js

Note: Other React frameworks are not currently supported, but they might still work. Try at your own risk.

Method	Instructions
LiftKit CLI	From any Next.js project, run the following command in your terminal. `npm run add navbar` content_copy
Github	open_in_new View on Github

No-Code Tools

Method	Instructions
Webflow	open_in_new Clone from Made In Webflow
Figma	open_in_new Clone from Figma Community

Props

Unique

Props unique to this component.

Name	Required	Type	Description	Default Val
ctaButtons	no	React.ReactNode	React elements to be displayed as call-to-action buttons	undefined
iconButtons	no	React.ReactNode	React elements to be displayed as icon-based buttons	undefined
material	no	LkMaterial	The visual style/material of the navbar	"flat"
navButtons	no	React.ReactNode	React elements to be displayed as navigation buttons	undefined
navDropdowns	no	React.ReactNode	React elements to be displayed as navigation dropdown menus	undefined

Common

Props with globally-defined behavior that are used in multiple components.

Common Props	Status
{children}	Not Supported
Native HTML attributes	Supported