Creating A Navbar With Material-ui

December 20, 2023 Post a Comment

I'm trying to create a simple navbar with Material-UI that looks like the one they use on their site. This is the code I wrote to try to replicate it: import React from 'react' imp

Solution 1:

Latest Update [2018]

Problem should be fixed in latest version.

Update #1 [2016]

At least, the will is there - Not all hope is lost!

Original Post

Had the same issue.

Turns out, it's a bug (#773).

But you are in luck: This PR provides a solution using CSS. It (kinda) works. Here is a screenshot:

As you can see, it looks a bit ugly, so you might want to keep fiddling with the CSS to get the tabs appear in the right place.

NOTE: Eight months ago, the PR got rejected. Apparently, displaying Tabs in AppBar is not high-priority, so, the hackfix solution is all you got at the moment!

Oh the agony of using pre-release libraries!

Solution 2:

I think Kabir's answer is a good start and I would also wrap the <Tabs> in a <ToolbarGroup > as the AppBar is subset of toolbars.

e.g.

Baca Juga

iconElementRight={<ToolbarGroup >{myTabs}</ToolbarGroup>}

see: http://www.material-ui.com/#/components/toolbar

Solution 3:

A little late to the party, but a solution that has worked for me. FYI, this is a React/Redux app with a Rails backend.

import React, { Component } from 'react'import PropTypes from 'prop-types'import { Link } from 'react-router'import AppBar from 'material-ui/AppBar'import Drawer from 'material-ui/Drawer'import MenuItem from 'material-ui/MenuItem'import { getBasename } from '../config/environment'

export default classNavbarextendsComponent{
  constructor(props) {
    super(props)
    this.state = {open: false}
    this.displayNavbar = this.displayNavbar.bind(this)
  }

  toggleDrawer = () => this.setState({ open: !this.state.open })

  authenticatedNavbar = () => {
    return (
      <div>
        <AppBar
          iconElementRight={
            <MenuItem
              containerElement={<Link to={getBasename() + 'login'} />}
              onTouchTap={() => {this.props.onLogoutClick()}}
              primaryText="Logout"
            />
          }
          onLeftIconButtonTouchTap={() => this.toggleDrawer()}
          title="Your_app"
        />
        <Drawer
          docked={false}
          onRequestChange={(open) => this.setState({open})}
          open={this.state.open}
        >
          <MenuItem
            containerElement={<Link to={getBasename() + 'home'} />}
            onTouchTap={() => { this.toggleDrawer() }}
            primaryText="Home"
          />
          <MenuItem
            containerElement={<Link to={getBasename() + 'some_component'} />}
            onTouchTap={() => { this.toggleDrawer() }}
            primaryText="Some Component"
          />
        </Drawer>
      </div>
    )
  }

  unauthenticatedNavbar = () => {
    return (
      <div>
        <AppBar
          iconElementRight={
            <MenuItem
              containerElement={<Link to={getBasename() + 'login'} />}
              primaryText="Login"
            />
          }
          showMenuIconButton={false}
          title="Your_app"
        />
      </div>
    )
  }

Then some other logic to show the appropriate AppBar according to the users state of authentication.

I don't really think that tabs are meant to be part of the App Bar. The Material spec shows them as a secondary toolbar.

Solution 4:

Have you used the react-tap-event-plugin? According to https://github.com/callemall/material-ui/issues/288 it's needed.

Solution 5:

Besides the CSS hack, I found out that you can use HTML Entities as a hack to split the tabs text. You can add   to the beginning and ending of the tab labels and you have your space.

It makes the label string ugly but if you don't care that much it does the work pretty well, and it also allow you to add as many spaces as you wish.

Here is the updated code:

importReactfrom'react'import {AppBar, Tabs, Tab} from'material-ui'classNavextendsReact.Component {
  render() {
    return (
      <AppBartitle="My App"><Tabs><Tablabel="&nbsp;Item 1&nbsp;" /><Tablabel="&nbsp;Item 2&nbsp;" /><Tablabel="&nbsp;Item 3&nbsp;" /><Tablabel="&nbsp;Item 4&nbsp;" /></Tabs></AppBar>
    )
  }
}

React.render(<Nav />, document.body)