Fluid UI Selection Grid Navigation

Currently utilizing Material-ui v1 beta, I am looking to implement a row of dropdown menus at the top of my web application for navigation purposes. While exploring the options available, I noticed the presence of the AppBar component with menu items, but no direct support for dropdown functionality. On the other hand, the Simple Menu does offer dropdown capabilities, yet it is suggested against using it for primary navigation.

This has led me to question why Simple Menu is not recommended for primary navigation and what the best practices are in this scenario.

If anyone has suggestions for an alternate solution that supports a dropdown navigation system situated at the top of the screen, particularly one that can be integrated with react-router, your input would be greatly appreciated.

navigationmaterial-ui

Answer №1

I opted for the drawer component over the menu component. The Drawer component offers great flexibility and is ideal for responsive design requirements. You can find a ready-to-use responsive drawer for this purpose. Additionally, the material-ui website showcases drawers as their primary menu on the left side, allowing you to observe its functionality by resizing the browser window.

Below is an example of how I implemented the drawer component:

import React from 'react';
import { MenuItem } from 'material-ui/Menu';
import Drawer from 'material-ui/Drawer';
import Toolbar from 'material-ui/Toolbar';
import Typography from 'material-ui/Typography';
import List from 'material-ui/List';
import ListItemText from 'material-ui/List/ListItemText';
import Hidden from 'material-ui/Hidden';
import LinkButton from '../LinkButton/LinkButton'
import CustomIconButton from '../CustomAppBar/CustomIconButton/CustomIconButton';
import FontAwesome from 'react-fontawesome';
import {Routes, ReportTypes} from '../../constants';

import { withStyles } from 'material-ui/styles';

const drawerWidth = 250;

// Rest of the code follows...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Searching and selecting columns in React using Material-UI

Currently, I am using Material-UI data tables and have implemented a search functionality similar to this Codesandbox example, which only searches the Name/Food column. This is my existing code snippet: const [filterFn, setFilterFn] = useState({ fn: items ...

javascriptreactjsmaterial-ui

Can the data of the current page be retrieved after reordering in Material-Table?

Is it possible to retrieve the current page data even after sorting? I am able to get the current page data after pagination changes, but not after sorting. The onOrderChange function only returns the column id and direction. Is there a way to get the sor ...

reactjsmaterial-uimaterial-table

Error: The ReactComponent in Material-kit-react is encountering type errors due to undefined classes

I am having trouble implementing an example from material-kit into my own project. The issue I am encountering is related to the rendering process when I include: const { classes, ...rest } = this.props; This code always causes 'classes' to b ...

reactjsreact-reduxmaterial-ui

Trigger an event when hovering over a disabled item in React using material-ui's tooltip feature

I've been trying to figure out how to hover over a disabled item with a tooltip, but it seems that disabled items don't trigger any events. I attempted wrapping my elements in another div as a workaround, but unfortunately, it didn't work. I ...

javascriptreactjsmaterial-uitooltip

The app bar menu items are failing to open the appropriate submenus in a correct

I am in the process of developing a frontend application using React16 along with the Material UI library. My current task involves creating a navigation bar at the top that contains multiple menu items. For this, I referred to the "simple menu" example o ...

reactjsmaterial-ui

Mastering the art of employing various dialog boxes and displaying modals within ReactJS

I am struggling to understand how to implement Material UI's dialog box to display modals, close them by clicking a button, and also show different modals when clicking on various elements. Below is the code for the dialog component that I copied fro ...

reactjsmodal-dialogcomponentsmaterial-ui

Receiving an error with React Proptypes when using the union type Breakpoint

Struggling to assign the correct proptype to the material-ui Breakpoint type. The breakpoint values are: export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; In my App.tsx file, I have the following ...

reactjstypescriptmaterial-uireact-proptypesunion-types

Customize Date Display in Material-UI DataGrid

How do I change the date format in MUI DataGrid from mongo's format to moment.js? In addition, I would like to add a new field with an edit icon that, when clicked, will redirect to the edit page. Here is what my code looks like: const columns = [ ...

javascriptreactjsmaterial-ui

Show all column data when a row or checkbox is selected in a Material-UI datatable

I am currently working with a MUI datatable where the properties are set as below: data={serialsList || []} columns={columns} options={{ ...muiDataTableCommonOptions(), download: false, expa ...

javascriptreactjsmaterial-uimui-datatable

What is the best way to align a container in the middle of the page without positioning the text in the center

Query 1: What is the best way to horizontally center the container div while keeping Typography aligned to the left? Expected outcome: https://i.stack.imgur.com/yKCZF.jpg Query 2: How can a component be positioned below the AppBar without relying on mar ...

cssflexboxmaterial-ui

Customizing the styling of a TextField component in ReactJS using material-ui

I am currently working with Reactjs and material-ui. I am looking to apply some custom styles to a TextField using css. Specifically, I would like to change the color of the TextField underline and label when the input is clicked. Although I know it can b ...

javascriptcssreactjsmaterial-ui

Material UI Checkbox Component: Label Not Present

Currently in the process of learning about Material UI and attempting to showcase a checkbox with a label. While following examples from the documentation available online here, I seem to be rendering a checkbox without a label. Can anyone guide me on wh ...

material-designmaterial-ui

Deleting the stylesheet exclusively within the confines of the React application window

Here is an image that will help illustrate the issue: https://i.stack.imgur.com/VA7fw.png If you want to check out the code sandbox for this problem, you can visit: https://codesandbox.io/s/annoying-stylesheet-2gpejc?file=/public/index.html I am current ...

javascriptcssreactjsmaterial-ui

Is it possible to change the maximum column count in material-ui by transposing the grid?

Currently, I am working on setting up a grid layout of cards : https://codesandbox.io/s/u93zn In our scenario, we are facing an issue where the number of columns will always exceed the number of rows (and it surpasses the maximum limit that the grid can ...

reactjsmaterial-ui

Creating dynamic, personalized content within an AppBar

In my composition, I have a material-ui AppBar positioned at the top, structured like this: <App> <AppBar/> <Main> <Route component={FooPage}/> <Route component={BarPage}/> </Main </App> My goal is to ...

material-ui

Transforming a React, Redux, and MUI Menu into an Electron Application

I'm in the process of transforming a web-based React + Redux + MUI application into an Electron app. The original app features a main AppBar with multiple dropdown menus, each containing menu items that interact with the app's Redux store. While ...

javascriptreactjsmaterial-uielectron

Tips for displaying personalized data with MUI DatePicker

I need to create a React TypeScript component that displays a MUI DatePicker. When a new date is selected, I want a custom component (called <Badge>) to appear in the value field. Previously, I was able to achieve this with MUI Select: return ( ...

javascriptreactjstypescriptmaterial-uidatepicker

Issue with MUI components - Unable to resolve @mui/material reference

Having trouble getting a basic mui button to function correctly, any suggestions on what might be going wrong? react_1 | ERROR in ./src/components/formSubmit.js 6:0-39 react_1 | Module not found: Error: Can't resolve '@mui/material' ...

reactjsnpmmaterial-ui

Every time I reload the page, the tab indicator on Material-UI returns to the first tab item

After integrating material-ui tabs with react router, I noticed that the tab indicator resets to the first tab upon page reload. I suspect this is due to the initial value of the tab being set to zero and resetting on page refresh. To visualize the issue, ...

reactjstabsmaterial-uireact-router-dom

How do I access the v4 documentation for MUI?

Incorporating @material-ui/icons into my project has been a game-changer. I am eager to delve into the source code behind this resourceful tool. A visit to https://www.npmjs.com/package/@material-ui/icons brought me closer, but I hit a roadblock when nav ...

node.jsreactjsnpmmaterial-ui