# 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](https://docs.digia.tech/ui-building-blocks/widgets/default-properties "mention"):

**Visibility**

* `visible`