search

negomi / react-burger-menu

:hamburger: An off-canvas sidebar component with a collection of effects and styles using CSS transitions and SVG path animations
http://negomi.github.io/react-burger-menu/
MIT License
5.05k stars 586 forks source link

Difficult to implement fixed footer #262

Closed michaelcohen716 closed 6 years ago

michaelcohen716 commented 6 years ago

Can't render html outside of the native "bm-item-list" class. Would like to make a new section with Menu but outside of item list so I can fix-position to the bottom

negomi commented 6 years ago

Hi @michaelcohen716,

There's nothing to stop you wrapping your items separately from your fixed footer, like this:

<Menu>
  <div className="your-item-list">
    <a id="home" className="menu-item" href="/">Home</a>
    <a id="about" className="menu-item" href="/about">About</a>
    <a id="contact" className="menu-item" href="/contact">Contact</a>
    <a onClick={this.showSettings} className="menu-item--small" href="">Settings</a>
  </div>
  <footer>
    // Make this stick to the bottom e.g. with absolute positioning
  </footer>
</Menu>

You will have to style your own menu items because they will no longer get the ones applied by the component, but I think that should achieve what you want, and it still being wrapped in the bm-item-list element shouldn't cause issues.

Hope that helps!