Web Component: j-NavLayout

  • Info
  • HTML
  • JS
  • CSS
  • Meta


A simple and fully responsive navigation layout.

Good to know:

  • path {Boolean} shows the navigation panel in display modes defined in the hide config option
  • <section> must contain a navigation
  • <main> must contain a content


  • width {Number} a size of navigation (default: 250)
  • hide {String} hides navigation in defined display modes (default: xs,sm)
  • autoresize {Boolean} enables auto-resizing (default: true)
  • position {String} navigation position (default: left)
  • margin {Number} adds margin for height (default: 0)
  • parent {String} can contain parent, window or jQuery selector for the closest method (default: window)