overflow-menu
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

Overflow Menu

A library to move menu items into an overflow menu when they will not fit on one line.

Example

Automatic initialization

To automatically initialize using data attributes, 3 elements must have attributes set.

data-overflow-menu-items should be set on the menu item container with a value set to the selector used to find the menu items.

data-overflow-menu-more-item should be set on the "More Items" menu item. It should be hidden by default, and should be visible when the menu item has the overflow-active class.

data-overflow-menu-more-container should be set (with no value) on the overflow menu item container. Items that do not fit will be moved into this container.

Manual example

const menu = new OverflowMenu.OverflowMenu({
  itemContainer: document.querySelector('.site-header > .container'),
  itemSelector: 'a.item',
  overflowItem: document.querySelector('.site-header .overflow-more-items'),
  overflowContainer: document.querySelector('.site-header .overflow-more-items .dropdown-menu'),
});
 
// If you don't want to use ResizeMonitor, call refreshSizes when elements are loaded and
// refreshMenu when the window is resized.
const monitor = new OverflowMenu.ResizeMonitor();
 
monitor.onRecalculateSizes(() => {
  menu.refreshSizes();
  menu.refreshMenu();
});
 
monitor.onResize(() => {
  menu.refreshMenu();
});
 
monitor.start();

License

MIT

Readme

Keywords

none

Package Sidebar

Install

npm i overflow-menu

Weekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

59.2 kB

Total Files

12

Last publish

Collaborators

  • erikp