AppBar

Open in Playground

Sticky top bar. links: [{ href, label, active?, ...extraLinkProps }]. Also: brand, logo, brandHref, actions, themeToggle, hideBrandOnMobile, linkComponent, linkProp, maxWidth.

Inside the header of `AppShell`, pass embedded to drop the bar's own sticky frame, so there is no double border and no nested banner.

Minion HQ

Props

AppBar

embeddedboolean
Default: false
Render just the row with no outer <header> frame, for use inside the header of AppShell.
brandReactNode
Brand name or element.
logoReactNode
Logo shown before the brand.
brandHrefstring
Default: '/'
Where the brand links to.
linksAppBarLink[]
Default: []
Navigation links. See the AppBarLink table below.
actionsReactNode
Extra controls on the right.
themeToggleboolean
Default: true
Show the theme toggle.
hideBrandOnMobileboolean
Default: false
Hide the brand text on small screens.
linkComponentElementType
Default: 'a'
Component used for links, e.g. a router Link.
linkPropstring
Default: 'href'
Name of the destination prop on linkComponent (e.g. "to" for react-router).
maxWidthstring
Default: 'max-w-5xl'
Tailwind max-width class.

AppBar props
Prop	Type	Default	Description
`embedded`	boolean	`false`	Render just the row with no outer `<header>` frame, for use inside the `header` of `AppShell`.
`brand`	ReactNode	–	Brand name or element.
`logo`	ReactNode	–	Logo shown before the brand.
`brandHref`	string	`'/'`	Where the brand links to.
`links`	AppBarLink[]	`[]`	Navigation links. See the AppBarLink table below.
`actions`	ReactNode	–	Extra controls on the right.
`themeToggle`	boolean	`true`	Show the theme toggle.
`hideBrandOnMobile`	boolean	`false`	Hide the brand text on small screens.
`linkComponent`	ElementType	`'a'`	Component used for links, e.g. a router Link.
`linkProp`	string	`'href'`	Name of the destination prop on `linkComponent` (e.g. "to" for react-router).
`maxWidth`	string	`'max-w-5xl'`	Tailwind max-width class.

AppBarLink

hrefstring
Destination of the link.
labelReactNode
Text of the link.
activeboolean
Default: false
Marks the current page.
...linkProps
Any other attribute is passed to the link element.

AppBarLink props
Prop	Type	Default	Description
`href`	string	–	Destination of the link.
`label`	ReactNode	–	Text of the link.
`active`	boolean	`false`	Marks the current page.
`...linkProps`		–	Any other attribute is passed to the link element.

Related hooks and theme:ThemeProvider