React Top App Bar

A React version of an MDC Top App Bar.

Installation

npm install @material/react-top-app-bar

Usage

Styles

with Sass:

import '@material/react-top-app-bar/index.scss';
import '@material/react-material-icon/index.scss';

with CSS:

import '@material/react-top-app-bar/dist/top-app-bar.css';
import '@material/react-material-icon/dist/material-icon.css';

Javascript Instantiation

import TopAppBar, {
  TopAppBarFixedAdjust, 
  TopAppBarIcon,
  TopAppBarRow,
  TopAppBarSection,
  TopAppBarTitle,
} from '@material/react-top-app-bar';
import MaterialIcon from '@material/react-material-icon';

const MyComponent = () => {
  return (
    <div>
      
        
          
            
               console.log('click')}/&gt;
            
            Miami, FL
          
          
            
               console.log('print')}
              /&gt;
            
          
        
      
      
        My exciting content!
      
    </div>
  );
}

Use the `` component to give your content top-padding, so it isn't hidden on page render.

Props

TopAppBar

TopAppBarRow

TopAppBarSection

TopAppBarTitle

TopAppBarIcon

TopAppBarFixedAdjust

> NOTE: if not dense, prominent, or short will apply mdc-top-app-bar--fixed-adjust

Icons

Use of Material Icon's for Action Items and Navigation Icons are recommended, since the Ripple is included with the Component. Using custom Components will require you to wrap the Component with the withRipple HOC. If you do decide to build your own custom Component, it is recommended to use the hasRipple prop to toggle between icons with and without ripple. See the Material Icon's implementation to see how to implement the hasRipple prop within your custom Component.

Navigation Icon

The navigation icon can be a <a>, <i>, <svg>, <image>, </image></svg><span>, etc., but again must be wrapped with the withRipple HOC.

  
    <i>menu</i>
  

If you decide to use a React Component please see Integrating with Components.

Action Items

Similar to the navigation icon, it can be </span></i></a><i><a>, <i>, <svg>, <image>, </image></svg><span>, etc., and must be wrapped with the withRipple HOC.

  
    <i>bookmark</i>
  

If you decide to use a React Component please see Integrating with Components.

Sass Mixins

Sass mixins may be available to customize various aspects of the Components. Please refer to the MDC Web repository for more information on what mixins are available, and how to use them.

Advanced Sass Mixins

Usage with Icons

Please see our Best Practices doc when importing or using icon fonts.

Usage with Drawer

Please see the docs in drawer to integrate with Top app bar