Menu's children always wrapped in <nav /> making it hard to use as normal off-canvas widget

Hey 😃

I’d like to use this for an off-canvas widget. However, the off-canvas should not contain a <nav /> but on the left a list of elements. And on the right there should be another off-canvas with various filters.

Similar to this: https://www.plattform-i40.de/I40/Navigation/Karte/SiteGlobals/Forms/Formulare/karte-anwendungsbeispiele-formular.html (Click on “LISTE” on the left, or “FILTEROPTIONEN” on the right) So there’s a map in the middle which has 2 off-canvas elements left and right that can be toggled.

Not sure this is possible or the best widget for this?

For one I’ve seen that all <Menu /> children are wrapped in a <nav />. This is something I would not want since the children are not a navigation.

https://github.com/negomi/react-burger-menu/blob/7e35a2d83b12b0e4132a7f459cbcd663610c7efe/src/menuFactory.js#L236-L259

I read https://github.com/negomi/react-burger-menu/issues/224#issuecomment-360362734 and thought of going down this way but I am not sure. Thanks for pointers, happy to contribute a PR if appropriate.

[jnachtigall]

Is your concern about semantic accuracy?

Yes, this and accessibility (screens reader often have kind of “jump to nav” functionality.

…

I’d be open to adding a prop (itemListElement or something) and allowing you to pass in a tag name string (e.g. ‘div’) with the default as ‘nav’, which we could then use to construct that element.

Would that help?

I think so. Should be easy to add. I’ll try this. Thank you!

[negomi]

Hey @jnachtigall,

Is your concern about semantic accuracy?

The menu was built with the navigation use case in mind, which is why we make that assumption, but it’s true that it’s just a sidebar and doesn’t have to be used for navigation at all.

I’d be open to adding a prop (itemListElement or something) and allowing you to pass in a tag name string (e.g. 'div') with the default as 'nav', which we could then use to construct that element.

Would that help?