# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://bricksmotion.gitbook.io/bricksmotion-components/components/menus/bottom-nav-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.