> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brikl.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Navbar 04

> Horizontal navbar with logo on left, centered nav links, and responsive mobile behavior.

<Frame>
  ![Navbar 04](https://ffciaqoksnnzuihswbxs.supabase.co/storage/v1/object/public/components/Blocks/Navbars/navbar-with-icons.png)
</Frame>

## Overview

Navbar 04 is a marketing navigation bar component featuring a logo on the left side and a set of navigation menu buttons (Home, Features, Pricing, About). It is designed for web pages and automatically hides the menu items on screens 768px wide or less, making it responsive. The component uses hover and clickability states for interactive button feedback.

## How to use

<Steps>
  <Step titleSize="h4" title="Open the Brikl panel">
    Navigate to the **Marketings** category in the Brikl panel.
  </Step>

  <Step titleSize="h4" title="Copy the component">
    Find **Navbar 04** and click **Copy**.
  </Step>

  <Step titleSize="h4" title="Paste into your editor">
    Paste it into your Bubble canvas with `Cmd + V` (Mac) or `Ctrl + V` (Windows),
    or right-click on the canvas and select **Paste**.
  </Step>
</Steps>

## States

This component includes conditional states that automatically change its appearance.

| State                | Trigger                                                          | Visual effect                                                                              |
| -------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| Menu Hidden (Mobile) | Current Page Width is less than or equal to 768px                | The GP - Menus group becomes invisible, collapsing the navigation links on smaller screens |
| Button Hovered       | User hovers over any nav button (Home, Features, Pricing, About) | Button background changes to rgba(245,244,244,1) with ease transition over 200ms           |
| Button Not Clickable | Button is not clickable                                          | Button opacity reduces to 50%                                                              |

<Note>
  These states are handled natively by Bubble and require no additional setup.
  They will work automatically once the component is pasted into your editor.
</Note>

## Responsive

This component adapts to mobile screens. Font sizes and layout automatically adjust on screens smaller than Bubble's built-in mobile breakpoint.

## Requirements

|             |                       |
| ----------- | --------------------- |
| License     | Starter plan required |
| Plugins     | None                  |
| Custom code | Not required          |

## Platforms

| Platform | Supported |
| -------- | --------- |
| Web      | ✅         |
| Mobile   | ❌         |

## License

<Note>
  This component requires a **Starter** plan.
</Note>