https://github.com/oom-components/horizontal-menu

Web component to create a responsive horizontal menu
https://github.com/oom-components/horizontal-menu

Last synced: 11 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 (14 days ago)
• Default Branch: main
• Last Pushed: 2024-12-15T12:03:07.000Z (14 days ago)
• Last Synced: 2024-12-15T12:28:42.170Z (14 days ago)
• Language: JavaScript
• Homepage: https://oom-components.github.io/horizontal-menu/demo
• Size: 0 Bytes
• Stars: 0
• 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

- Light: Less than 200 lines of code (including comments and spaces)

- Follow the **progressive enhancement strategy**. If the JavaScript fails, the

  links are visible.

- No styles or themes are provided with this package. Just the basic styles.

- Build with modern javascript, using ES6 modules and custom elements

- Live demo: https://oom-components.github.io/horizontal-menu/demo

## Usage

### HTML

Create the menu with the following HTML code:

```html

  Link 1

  Link 2

  Link 3

  Link 4

  Link 5

```

### JS

Register the custom element to make it responsive:

```js

import Menu from "horizontal-menu/src/menu.js";

// Define the custom element

customElements.define("my-menu", Menu);

```

### CSS

Use CSS to customize your menu. This web component uses a shadow dom and _parts_

to customize the internal elements. The internal tree is (removed some

attributes for clarity):

```html



  


    

  

  


    

      

    

    


      

    

  



```


```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 */

  }

}

```