Monday, August 5, 2019

Material-UI + React Router - #7 Navigation Menu

Now that we got a drawer going, it's time to implement a side menu with links. Your first instinct might be to use a List with ListItem's for each link in the navbar. When the link is active, we'd want to make its list item selected. However, as it turns out, lists in MUI don't allow for selectable items The good news is that a Menu component does.

Integrating React Router library with Material UI is rather trivial. Built-in components such as Button and MenuItem expose an optional "component" prop which allows to tweak the underlying node for the component. If we pass down a Link from react-router-dom, then the Button will effectively become a nav link. Any remaining props that we pass, including "to", will be spread out on the element. See an example in the links below.

Lastly, I'll show you how you can group multiple HOCs into one with a util function from the recompose package. Though you could still get away by nesting HOCs one inside the other, recompose will get the job done in a cleaner way. After all, why not experiment with it when it's already installed as a sub-dependency?

Menu in MUI

No comments:

Post a Comment