# Menu The `` element provides a list of options for a user to select from. A list of options is created within the `` of the `` element by using the `` element to define options. Use a standard `
` element to create dividers within the list of options. The `` element is designed for contextual menus, e.g. a dropdown menus. They are not intended to be used for navigation menus which have a different semantic meaning. The `` element does not support hide/show functionality within its scope. This functionality will be managed by a wrapping element such as a drop-down menu composite element. ## Menu Use Cases The `` element should be used in situations where users may: * A user needs to select one option from a list of options. ## Getting Started #### NPM Installation ```shell $ npm i @aurodesignsystem/auro-formkit ``` ### TypeScript Module Resolution When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`: ```json { "compilerOptions": { "moduleResolution": "bundler" } } ``` This configuration enables proper module resolution for the component's TypeScript files. ## Install from CDN In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported. ```html ``` ## Formkit Development ### Filtering Running the `dev` command will open a `localhost` development server for all components in the monorepo at once. To only develop a single component, use the `--filter` flag: ```shell npx turbo dev --filter=@aurodesignsystem/auro-input ``` ## Custom Component Registration for Version Management There are two key parts to every Auro component: the class and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML. When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you. However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts. You can do this by importing only the component class and using the `register(name)` method with a unique name: ```js // Import the class only import { AuroMenu, AuroMenuOption } from '@aurodesignsystem/auro-formkit/auro-menu/class'; // Register with a custom name if desired AuroMenu.register('custom-menu'); AuroMenuOption.register('custom-menu-option'); ``` This will create a new custom element `` and `` that behaves exactly like `` and ``, allowing both to coexist on the same page without interfering with each other.
Stops Price Duration Departure Arrival
See code ```html Stops Price Duration Departure Arrival ```