TopAppBar

Description

The top application bar display information and actions relating to the current screen. It can contain branding, screen titles, navigation, and actions.

See live demos on storybook

Storybook TopAppBar Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-top-app-bar @element-public/themes

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Notes

TopAppBar is normally placed at the top of a page or site to display things such as the title, subtitle, or other items that a menu would hold. Using TopAppBar is a good way to keep the page organized and easy to navigate. It is easy to use and understand making it very user-friendly.

Top App Bar Props

| Name | Type | Default | Required | Description | | ------------------ | ------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | className | string | undefined | false | The css class name to be passed through to the component markup. | | contextual | boolean | false | false | The top app bar will styled contextually and displaying contextualActions. A top app bar can transform into a contextual top app bar to provide contextual actions to selected items. For example, if a photo is selected, phot editing actions can be displayed. | | contextualTheme | string | 'dark' | false | Visual theme of the contextual background, dark or lightAccepted Values: dark, light | | dense | boolean | false | false | The TopAppBar will have reduced padding. | | elevated | boolean | false | false | Whether or not the top app bar is elevated. By default it will be elevated on scroll only. | | fixed | boolean | true | false | The TopAppBar will remain on screen. | | logoSize | string | 'small' | false | Size of the logo. Use small for 40x40, medium for 80x40, large for 130x40 images and lgSquare for 48x48.Accepted Values: small, medium, large, lgSquare | | logoTitleWrapper | React.ReactNode|function | undefined | false | Optionally wrap both the logo and title content. This is intended for situations where a combined clickable logo & title would be used to go to the home/root of a website or application. Note: any interaction styling and accessibility concerns need to be handled by the wrapper itself (which is recommended for accessibility). | | prominent | boolean | false | false | The TopAppBar will have increased padding. | | scrollTarget | React.ReactNode|string | 'window' | false | Set a custom scroll target for the top app bar, defaults to window. | | subtitle | string|React.ReactNode | null | false | Subtitle text for the Top App Bar. Cannot be used with children. | | tabActions | boolean | false | false | Indicates whether the actions are tabs. Only necessary if not using Element Tabs. Will apply styles automatically for Element Tabs. Custom CSS may be necessary if not using Element Tabs. | | themeColor | string | 'primary' | false | Background theme color. Accepts one of 'primary', 'secondary', or 'surface'.Accepted Values: primary, secondary, surface, linear-gradient-white-to-bottom, linear-gradient-white-to-top, linear-gradient-black-to-bottom, linear-gradient-black-to-top, linear-gradient-primary-dark-to-bottom, linear-gradient-primary-dark-to-top, linear-gradient-primary-darker-to-bottom, linear-gradient-primary-darker-to-top, linear-gradient-primary-to-bottom, linear-gradient-primary-to-top, linear-gradient-secondary-dark-to-bottom, linear-gradient-secondary-dark-to-top, linear-gradient-secondary-darker-to-bottom, linear-gradient-secondary-darker-to-top, linear-gradient-secondary-to-bottom, linear-gradient-secondary-to-top | | title | string|React.ReactNode | null | false | Title text for the Top App Bar. Cannot be used with children. | | useContentMaxWidth | boolean | false | false | If true the top app bar's content will have a max width according to your theme's breakpoints. |

Top App Bar Render Props

| Name | Type | Default | Required | Description | | ------------- | --------------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | actions | React.ReactNode | null | false | Expects one or more ActionItems, will accept any valid components or markup. | | children | React.ReactNode | undefined | false | Content to be rendered in the center of TopAppBar. Accepts any valid markup. Cannot be used with Title and Subtitle. | | logo | React.ReactNode | null | false | Optional logo. Expects an image but accepts any valid markup. | | navigation | React.ReactNode | null | false | Navigation icon to trigger a menu. Expects an IconButton but accepts any valid markup. | | prominentTabs | React.ReactNode | null | false | Tabs to be displayed in the lower slot of the top app bar. If this props is present the prominent props is automatically applied. If the actions prop is tabs actions will be ignored. Expects Element Tabs, but accepts any valid components or markup. |

Top App Bar Events

| Name | Default | Required | Params | Description | | ------------ | ------- | -------- | ------ | -------------------------------------- | | onNavigation | null | false | | Fired when navigation icon is clicked. |

Top App Bar Breaking Changes

| Description | | ----------------------------------------------------------------------- | | short (removed): This variant is no longer supported. | | shortCollapsed (removed): This variant is no longer supported. | | shortCollapsedWithIcons (removed): This variant is no longer supported. | | variant (removed): These variants are no longer supported. |

Action Item Props

| Name | Type | Default | Required | Description | | ----- | --------------------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------- | | badge | string|function|React.ReactNode | undefined | false | The custom action notification badge to be rendered. | | icon | string | null | false | Accepts the name of any valid material icon (see Icon component documentation for a list of valid icons). | | label | string | null | false | ARIA label value to support screen readers. | | type | string | 'icon' | false | Type of action item to be rendered.Accepted Values: icon, link, tabs |

Top App Bar Fixed Adjust Props

| Name | Type | Default | Required | Description | | ------------------ | ------------------------------------------ | --------- | -------- | -------------------------------------------------------------------------------- | | bannerOpen | boolean | false | false | Apply the adjusted left margin. | | className | string | undefined | false | The css class name to be passed through to the component markup. | | dense | boolean | false | false | Set to the same value as in TopAppBar to have the correct spacing. | | prominent | boolean | false | false | Set to the same value as in TopAppBar to have the correct spacing. | | tag | string|React.ElementType|React.Component | 'div' | false | Base component/tag that will be rendered. | | useContentMaxWidth | boolean | false | false | If true the content will have a max width according to your theme's breakpoints. |

Top App Bar Fixed Adjust Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ---------------------------------------------------------------------- | | children | React.ReactNode | null | false | Content to be rendered inside the TopAppBar. Accepts any valid markup. |

Top App Bar Content Wrapper Props

| Name | Type | Default | Required | Description | | --------- | ------ | --------- | -------- | ---------------------------------------------------------------- | | className | string | undefined | false | The css class name to be passed through to the component markup. |

Top App Bar Content Wrapper Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ---------------------------------------------------------------------- | | children | React.ReactNode | null | false | Content to be rendered inside the TopAppBar. Accepts any valid markup. |