menu
Channels
# All channels
view-forward
# General
view-forward
# Help me
view-forward
# Requests
view-forward
Team

How do you show activated state with `<Menu>`?

May 23, 2020 at 12:05am

How do you show activated state with `<Menu>`?

May 23, 2020 at 12:05am
I am using a <Menu> in a sidebar in my app for sub-navigation. Just wondering what the best way is to show the current selected page? The menu has a built in way to show which is 'active', as in - what you're hovered over... but I am not sure how I can modify the style to show it as active? My <Menu.Item> are being rendered as ReactRouter Link elements, and I don't think any of the styling I apply to the Menu Item are being passed down to the Link element, so I can't even make the menu item appear underlined or bold.

May 23, 2020 at 1:36am
Do you have a link to a minimal reproduction of what you are seeing? e.g. codesandbox or even a code snippet here?
  • reply
  • like
What said! Would just love to see how you're passing through additional props to <Menu.Item />. You might have to manage the active menu item state on your own, but the style props still should be making it through to the underlying <Pane /> in <Menu.Item />
  • reply
  • like
It looks like bold and text decoration get overridden along the way
  • reply
  • like
Background Colour works but obviously doesn't work when you hover over the item
  • reply
  • like
i'd be happy to get underline and bold working
  • reply
  • like

May 24, 2020 at 7:42pm
So, there isn't a seamless way to do what you are after, but you can simply wrap children (the label) with Text:
  • reply
  • like
like-fill
2
  • reply
  • like
The reason it doesn't work is because Text has a default fontweight and size that you cannot override internally in this component: https://github.com/segmentio/evergreen/blob/master/src/menu/src/MenuItem.js#L127-L129
Edited
  • reply
  • like
Ahh that works, I guess it is a hard one because you don't want to just keep passing props down but in this case it would have been nice. Thanks for the help!
Edited
  • reply
  • like