> For the complete documentation index, see [llms.txt](https://bricksmotion.gitbook.io/bricksmotion-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bricksmotion.gitbook.io/bricksmotion-components/components/menus/bottom-nav-1.md).

# Bottom Nav #1

### Component Structure

* **BOTN1 COMPONENT** (Block): The foundational element of the bottom navigation, fixed at the bottom of the viewport. It is styled with the `botn1__component` class, which may include positioning and layout styles.
* **BOTN1 CONTAINER** (Container): Hosts the navigation elements, aligned and spaced with the help of the `botn1__container` class for optimal layout and aesthetics.
  * **BOTN1 MENU** (Div): A container for the navigation links, arranged in a row or column depending on the viewport. The `botn1__menu` class applies central alignment, spacing, and possibly background styling to this element.
    * **BOTN1 MENU ITEM** (Div): Each navigation link, wrapped in a `botn1__menu-item` class for padding, border radius, and relative positioning. Inside, you'll find:
      * **Menu Link** (Text-Basic): Displays the link text with the `botn1__menu-link` class applied for typography color and positioning.
      * **Menu Shape** (Div): An optional decorative feature within the menu item, styled with the `botn1__menu-shape` class for absolute positioning and background color.
* **BOTN1 M WRAPPER** (Div): A mobile-specific navigation element wrapper, visible under certain conditions, and uses the `botn1__mobile-trigger` class for styling. It encases mobile navigation triggers:
  * **BOTN1 M BAR** (Div): Forms part of the mobile interaction, changing appearance in response to user actions. Styled with the `botn1__mobile-bar` class for background color, width, and height adjustments.

### Animation Structure

**Timelines**

* **BOTN1 - MOBILE**: Animates the `.botn1__menu` to transition smoothly on mobile devices. It uses scaling and opacity changes to show or hide the menu and individual items, enhancing the mobile user experience.

**Events**

* **BOTN1 - MOUSEENTER**: Triggers on hovering over a menu item, adding visual cues such as changing the menu shape appearance to indicate the hover state, utilizing classes for hover styling.
* **BOTN1 - MOUSELEAVE**: Reverses the hover state animations, ensuring a seamless transition out of the hover state and maintaining a clean and intuitive navigation experience.