> For the complete documentation index, see [llms.txt](https://docs.nickarce.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.nickarce.com/bricks-mega-menu/docs/getting-started/dropdowns.md). # Dropdowns This document covers the styling that will be applied to both the menu dropdowns and the mega dropdowns. ## Dropdown Background Color *** Edit $dropdown-background to your desired color ```scss // WHAT BACKGROUND COLOR DO YOU WANT FOR DROPDOWN WRAPPER ****** $dropdown-background: white; ``` ## Dropdown Reveal Animation Position *** ### When its not visible where do you want it to be positioned? Change the below to your desired value. The higher the number the lower it sits in the browser. ```scss $fade-up-closed: 40px; // STARTING POSITION (not active) ``` ### When the dropdown is visible where do you want it positioned? Change the below to your desired value. The higher the number the lower it sits in the browser. ```scss $fade-up-open: 20px; // ENDING POSITION (active) ``` ## Dropdown Chevron Animation *** There are three animation choices for the dropdown chevron icon when the dropdown is open and active. 1. none: no animation 2. flip: flips the icon 180deg 3. rotate: rotates the icon 180deg ```scss $active-dropdown-icon-anim: flip; // SELECTION (none/flip/rotate) ``` ## Dropdown Accessibility *** The template does as much as it can to be accessible but it will require you to make a few changes that will be unique to your website. For every dropdown you will need to add in an aria-label. This tells keyboard users what opening the dropdown will do. Examples: * If the dropdown text is "Men's Clothing" the aria-label should be something like "Toggle Men's Clothing Dropdown" * If the Dropdown Text is "Resources" the aria-label should be something like "Toggle Resources Menu" You can call it a menu, dropdown, list, etc. That part is up to your website preference.