Bain Logo

App Bar

Jump to Props

Provide a main heading for your app

The App Bar is essentially a header or navigation bar.

Import

Use

Pass position="fixed" to the component if you would like it to be attached to the top.

Content Areas

The AppBar has four content areas – left, middle, right and bottom.

Left Content
Middle Content
Right Content
Bottom Content
  • Left - usually for menus, logos and app titles
  • Middle - can contain links or logos
  • Right - usually for extra buttons, user profile info etc
  • Bottom - not often used, but for mobile can offer a more "native" app feel for instance adding larger headlines with more spacing.

Constrain the content width

By default, the content areas will stretch to fill the viewport. If you would like to constrain the maximum width of the content (for example, if your page layout does not stretch to fill the viewport), pass a number value (as a number or in pixels, em or rem) to the contentMaxWidth prop.

AppBarItem

To use the pre-set styled nav items, import AppBarItem:

My App
Scanner
Tracker
Planner

This component takes the same props as Box, but with some pre-set styles.

Set isActive on the currently active item. You can change the color of the active border by setting activeBorderColor.

Mobile Behavior

My ADAPT App
Proin venenatis molestie sagittis. Proin convallis enim vel felis vestibulum, ac rutrum quam facilisis. Mauris dictum scelerisque interdum. Mauris rutrum egestas tellus, a accumsan tortor tempus vel. Duis vel ligula leo. In lectus ante, sollicitudin ut gravida id, vehicula ut arcu. Integer placerat dolor non orci scelerisque semper.

Extra content

  • Set a background image
  • Pass bottomContent

My App

Proin venenatis molestie sagittis. Proin convallis enim vel felis vestibulum, ac rutrum quam facilisis. Mauris dictum scelerisque interdum. Mauris rutrum egestas tellus, a accumsan tortor tempus vel. Duis vel ligula leo. In lectus ante, sollicitudin ut gravida id, vehicula ut arcu. Integer placerat dolor non orci scelerisque semper.

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
leftContentReactNode

Content to show in the left side of the component.

middleContentReactNode

Content to show in the left side of the component.

rightContentReactNode

Content to show in the left side of the component.

bottomContentReactNode

Content to show in the left side of the component.

contentMaxWidthstring | number

Use to limit the width of the content area of the component whilst still letting its visible container expand to fit the width of the viewport.

contentWrapperPropsobject

Props passed to the element which wraps the four content areas.

bgstringbackground

Background color of the component.

AppBarItem

Props

PropTypeDefaultDescription
isActiveboolean

Set to true if the item is the current page.

childrenReactNode

Contents of the item.

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy