Columns

Multi-column dropdown with grouped link sections

_mega_menu.html.erb

███ ███████ ████████████████ █████████ ███ ███████████ ██████ ██████████ ██

████ ███████████████████████████ ███████████████ ██████████████
  ███ ███████ ██████ ██
  ███████
    █████████████
    ███████████████████████████████
    ████████████████████████████████████████ ███████████████████████████ ████████████████████████
    ██████████████████ ████████████ ███████ ██████████ ████ ████ ███████ ███████████ ██████████████ ██████████████████ ██████████████████ ████████████████████ ████████████████████████████ ███████████████████████████ █████████████████ ████████████ ██████████████ ███████████████████ ███████████████████████ ██████████████████████████████████
  █

Get Access to View Code

mega_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ██████████

  █████████ █
    █████████ █ █████
    █████████████████ █ ████
    ███████████████████ █ █████████████████████████
  █

Get Access to View Code

mega_menu_columns_component.html.erb

████ ███████████████████████████ ███████████████ ██████████████
  ███████
    █████████████
    ███████████████████████████████
    ████████████████████████████████████████ ███████████████████████████ ████████████████████████
    ██████████ ███████████████ ███
  █
    ███ █████████████ ██
    ███ ████████████ ██
  █████████

Get Access to View Code

mega_menu_columns_component.rb

█ ██████████████████████ ████

█████ ████████████████████████ █ ███████████████████
  ███████████ ███████████████ ██████████ ███████████

  ███ ██████████████████████████ █████████ ███ ███████████ ██████
    ██████████████ █ █████████████
    █████████ █ ████████
    ███████████ █ ██████████
  ███

Get Access to View Code

mega_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ██████████

  █████████ █
    █████████ █ █████
    █████████████████ █ ████
    ███████████████████ █ █████████████████████████
  █

Get Access to View Code

Options

Name	Type	Default	Description
`trigger_label` *	String	required	Text label for the trigger button
`sections`	Array		Array of section hashes with :title (String) and :items (Array of {:label, :href, :description, :icon})
`full_width`	Boolean	`false`	Whether the panel spans full width of its container

Name	Type	Default	Description
`trigger_label` *	String	required	Text label for the trigger button
`sections`	Array		Array of section hashes with :title and :items
`full_width`	Boolean	`false`	Whether the panel spans full width of its container

Featured

Multi-column dropdown with a featured content area alongside links

_mega_menu.html.erb

███ ███████ ████████████████ █████████ ███ ███████████ ██████ ███████████████ ████ █████████████████████ ████ ███████████████ ████ ██████████████ ████ ██████████ ██

████ ███████████████████████████ ███████████████ ██████████████
  ███ ███████ ██████ ██
  ███████
    █████████████
    ███████████████████████████████
    ████████████████████████████████████████ ███████████████████████████ ████████████████████████
    ██████████████████ ████████████ ███████ ██████████ ████ ████ ███████ ███████████ ██████████████ ██████████████████ ██████████████████ ████████████████████ ████████████████████████████ ███████████████████████████ █████████████████ ████████████ ██████████████ ███████████████████ ███████████████████████ ██████████████████████████████████
  █

Get Access to View Code

mega_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ██████████

  █████████ █
    █████████ █ █████
    █████████████████ █ ████
    ███████████████████ █ █████████████████████████
  █

Get Access to View Code

mega_menu_featured_component.rb

█ ██████████████████████ ████

█████ █████████████████████████ █ ███████████████████
  ███████████ ███████████████ ██████████ ████████████
              ████████████████ ██████████████████████ ████████████████ ██████████████

  ███ ██████████████████████████ █████████ ███ ███████████ ██████ ███████████████ ████ █████████████████████ ████ ███████████████ ████ ██████████████ ████
    ██████████████ █ █████████████
    █████████ █ ████████
    ███████████ █ ██████████

Get Access to View Code

mega_menu_featured_component.html.erb

████ ███████████████████████████ ███████████████ ██████████████
  ███████
    █████████████
    ███████████████████████████████
    ████████████████████████████████████████ ███████████████████████████ ████████████████████████
    ██████████ ███████████████ ███
  █
    ███ █████████████ ██
    ███ ████████████ ██
  █████████

Get Access to View Code

mega_menu_controller.js

██████ █ ██████████ █ ████ ████████████████████

██████ ███████ █████ ███████ ██████████ █
  ██████ ███████ █ █████████ ██████████

  █████████ █
    █████████ █ █████
    █████████████████ █ ████
    ███████████████████ █ █████████████████████████
  █

Get Access to View Code

Options

Name	Type	Default	Description
`trigger_label` *	String	required	Text label for the trigger button
`sections`	Array		Array of section hashes with :title and :items
`full_width`	Boolean	`false`	Whether the panel spans full width of its container
`featured_title`	String		Title for the featured content area
`featured_description`	String		Description text for the featured area
`featured_image`	String		Image URL for the featured area
`featured_href`	String		Link URL for the featured content

Name	Type	Default	Description
`trigger_label` *	String	required	Text label for the trigger button
`sections`	Array		Array of section hashes with :title and :items
`full_width`	Boolean	`false`	Whether the panel spans full width of its container
`featured_title`	String		Title for the featured content area
`featured_description`	String		Description text for the featured area
`featured_image`	String		Image URL for the featured area
`featured_href`	String		Link URL for the featured content

Changelog v1.0.0

- v1.0.0: Initial release with columns and featured styles
- Hover-intent with 200ms delay
- Mobile click toggle support
- Escape key to close

Mega Menu

Columns

Options

Featured

Options

Changelog v1.0.0

Get Full Access