This is the home page. Use the menu to navigate.
This is the about page. Learn more about the flexible menu by visiting the FlexMenu demo site..
Let's begin with a classic example of the flexible menu, to demonstrate its capabilities by outlining the navigation structure of the documentation for the flexible menu itself. The documentation is organized into several sections, each dedicated to a specific component of the flexible menu. You can navigate through these sections using the menu items below.
The fastest way to get started with the flexible menu is to include the flexmenu.js script in your HTML file, like so:
<script src="https://unpkg.com/@esavoretti/flexmenu" type="module"></script><script type="module" src="https://cdn.jsdelivr.net/gh/sandy98/flexmenu/flexmenu.js"></script> npm install @esavoretti/flexmenu <script src="path/to/flexmenu.js" type="module"></script>
Here's a typical structure showing flex-menu as the main component, with color-label, menu-item,
menu-list, main-menu, and hamburger-button as its subcomponents.
Each of these components has its own documentation section that you can access through the menu.
<flex-menu>
<menu-item>
Home
</menu-item>
<menu-list menu-title="Documentation">
<menu-item href="#getting-started">Getting Started</menu-item>
<menu-separator></menu-separator>
<menu-item href="#color-label">Color Label</menu-item>
<menu-item href="#menu-item">Menu Item</menu-item>
<menu-item href="#menu-list">Menu List</menu-item>
<menu-item href="#main-menu">Main Menu</menu-item>
<menu-item href="#hamburger-button">Hamburger Button</menu-item>
</menu-list>
<menu-item href="#configuration">Configuration</menu-item>
<menu-item href="#about">About</menu-item>
</flex-menu>
The previous html code snippet illustrates how to structure the flexible menu with its various components. Each menu item corresponds to a section in the documentation, allowing you to easily navigate and learn
Time to move on to the next sections, where we will delve into the details of each component, starting with the most basic component: the color label.
This section provides documentation for the flex menu component.
This section provides documentation for the color label component.
This section provides documentation for the menu item component.
This section provides documentation for the menu list component.
This section provides documentation for the main menu component.
This section provides documentation for the hamburger button component.