https://github.com/oom-components/horizontal-menu
Web component to create a responsive horizontal menu
https://github.com/oom-components/horizontal-menu
Last synced: 28 days ago
JSON representation
Web component to create a responsive horizontal menu
- Host: GitHub
- URL: https://github.com/oom-components/horizontal-menu
- Owner: oom-components
- License: mit
- Created: 2024-12-15T11:47:40.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-12-15T12:03:07.000Z (11 months ago)
- Last Synced: 2025-02-07T03:15:04.795Z (10 months ago)
- Language: JavaScript
- Homepage: https://oom-components.github.io/horizontal-menu/demo
- Size: 5.86 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Horizontal menu
Web component to create a responsive horizontal menu. In narrow screens, the
items that don't fit in the menu are moved to a dropdown list.
- No dependencies
- Very light
- Follow the **progressive enhancement strategy**. If the JavaScript fails, the
links are still visible.
- No styles or themes are provided with this package. Just the basic styles.
- Build with modern javascript, using ES6 modules and custom elements
## Usage
Import and register the component with the desired tag name:
```js
import Menu from "horizontal-menu/horizontal-menu.js";
customElements.define("oom-menu", Menu);
```
Create the menu with the following HTML code:
```html
Link 1
Link 2
Link 3
Link 4
Link 5
```
Use CSS to customize your menu. This web component uses a shadow dom and _parts_
to customize the internal elements.
```css
my-menu {
/* Generic styles */
display: flex;
a {
white-space: nowrap;
}
&::part(menu) {
/* Main container */
}
&::part(links) {
/* Horizontal links */
}
&::part(dropdown) {
/* Dropdown container */
}
&::part(dropdown-button) {
/* Button to show/hide the dropdown */
}
&::part(dropdown-links) {
/* Dropdown links */
}
}
```
The HTML structure of the shadow DOM is:
```html
```