Learner Learner - 21 days ago 7x
React JSX Question

could not show items in navbar as per the need

I am using reactjs and material-ui for development of my application. I am developing a dashboard. Before i used react-mdl for component and using it the navbar component is working as expected. I want to use material-ui, though as it has lots of component and support. It is mature than react-mdl. Everything is working perfectly except navbar component where i have used AppBar.

Below is the screenshot of navbar i have designed using both material-ui and react-mdl. I want the 2nd navbar(it is designed using react-mdl) using material-ui which i could not. I tried using tab inside AppBar but no luck. The concept is there will be 2 tab at first and when the add icon is clicked that is on the right side, user gets to add a new tab over there. How can i design it the same way?

enter image description here

Here is my code

render() {
const navigation = (
<BottomNavigation style={{ background:'transparent'}}>
<i className="material-icons md-23">delete</i>
<i className="material-icons md-23">add_circle</i>

return (
<div className="mdlContent" style={{height: '900px', position: 'relative'}}>
<AppBar iconElementRight={navigation} >


You can do this via passing a component as the title to the <AppBar/> component.

Check the following pen:


Instead of using tabs inside the navBar which is a bit tricky, you can use <a> and handle the route to render the specific page.