# Navigation Bar Custom

The Navigation Bar Custom provides a container for creating a completely custom navigation bar using `NavigationBarItemCustom` widgets as children.

### Use Cases

Use **Navigation Bar Custom** when you want to:

* **Build a unique bottom bar design**
  * Floating center button (like a big “+” action)
  * Curved or elevated navbar with special shapes
  * Custom backgrounds, gradients, blur, or shadows
* **Mix navigation + primary actions**
  * 2–3 tabs plus one big central action (e.g., “Scan”, “Create”, “Post”)
  * Custom layouts like left-aligned items + one highlighted CTA
* **Brand-heavy or theme-specific UI**
  * Highly branded nav for fintech, gaming, or social apps
  * Icon-only nav, text-only nav, or fully custom widgets as items

### Core Concepts

1. **You Control the Layout**
   * Instead of fixed icon+label items, you can place **any widgets** inside: icons, text, avatars, custom buttons, badges, etc.
   * You define the arrangement: equal spacing, centered button, asymmetrical layout, etc.
2. **Manual State Handling**
   * You typically manage the active tab or selected state yourself (e.g., `activeIndex`).
   * Taps on your custom items must explicitly:
     * Update the selected index
     * Trigger navigation or screen change
3. **Custom Interaction Patterns**
   * You can add:
     * Long-press behaviors
     * Double-tap shortcuts
     * Special animations on selection (scale, color change, glow)
4. **Same Role, More Freedom**
   * Functionally, it still acts as the **primary navigation** for the app.
   * Visually and structurally, you get **much more freedom** than the standard Navigation Bar.

### Properties

| Property            | Description                                                   |
| ------------------- | ------------------------------------------------------------- |
| `backgroundColor`   | The background color of the navigation bar.                   |
| `height`            | The height of the navigation bar.                             |
| `surfaceTintColor`  | The surface tint color of the navigation bar.                 |
| `indicatorColor`    | The color of the indicator that highlights the selected item. |
| `indicatorShape`    | The shape of the indicator.                                   |
| `overlayColor`      | The color of the overlay that appears when an item is tapped. |
| `animationDuration` | The duration of the animation when switching between items.   |
| `borderRadius`      | The corner radius of the navigation bar.                      |

### Children of Navigation Bar Custom

| Slot       | Description                                                                                                   |
| ---------- | ------------------------------------------------------------------------------------------------------------- |
| `children` | Multiple **Navigation Bar Item Custom** widgets that represent each custom tab/section in the navigation bar. |

### When to Use Navigation Bar vs Navigation Bar Custom

**Use Navigation Bar when:**

* You need a standard bottom navigation with icon + label items
* Each tab has a simple icon/image and optional text label
* You want built-in selected/unselected state styling
* Your design follows common Material Design patterns

**Use Navigation Bar Custom when:**

* You need complete control over the navigation bar layout
* You want custom shapes, backgrounds, or unique item designs
* You're implementing a floating center button or asymmetrical layout
* Your brand requires highly customized navigation styling

### Default Properties

The Navigation Bar Custom widget supports the following sections of [Default Properties](/ui-building-blocks/widgets/default-properties.md):

**Visibility**

* `visible`


---

# 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://docs.digia.tech/ui-building-blocks/widgets/navigation-widgets/navigation-bar-custom.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.