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

# Topbar

> A layout that provides a top navigation bar with automatic safe area handling.

## Example

<CodeGroup>
  ```dart Basic Usage lines theme={null}
  NeoTopbarLayout(
    topbarChildren: [
      Expanded(
        child: Row(
          children: [
            Text(
              "My App",
              style: theme.textStyles.header1.copyWith(
                color: theme.colors.fgPrimary,
              ),
            ),
          ],
        ),
      ),
      NeoTabBar(
        tabs: [
          NeoTab(id: "dashboard", label: "Dashboard"),
          NeoTab(id: "products", label: "Products"),
          NeoTab(id: "orders", label: "Orders"),
        ],
        activeTabId: activeTabId.value,
        onChange: (id) {
          // Handle tab change
        },
      ),
      Expanded(
        child: Row(
          mainAxisAlignment: .end,
          children: [
            NeoButton(
              variant: .outlined,
              label: "Profile",
              onPressed: () {
                // Handle profile button press
              },
            ),
          ],
        ),
      ),
    ],
    child: const AutoRouter(),
  ),
  ```
</CodeGroup>

## Properties

### Required

<ParamField path="topbarChildren" type="List<Widget>" required>
  The list of widgets to display in the topbar area. While you have full flexibility, this typically contains navigation elements, branding, or action buttons.
</ParamField>

<ParamField path="child" type="Widget" required>
  The main content widget that will be displayed below the topbar. Typically `const AutoRouter()` when using Neo's recommended routing approach, but can be any widget that represents your main content area.
</ParamField>

## Best Practices

* **Recommended with AutoRouter**: Use `child: const AutoRouter()` for nested routing when using Neo's CLI templates and routing approach.
* **Safe area handling**: Structure your pages with `Container(color: theme.colors.bgPrimary)` → `NeoSafeArea` → `your content` for proper full-screen behavior.

## Integration Notes

* **Safe Area Handling**: The layout automatically handles safe areas, ensuring content is not obstructed by system UI elements like notches or status bars.
* **Theme Integration**: The topbar area respects Neo's theming system and integrates seamlessly with the overall application design.
* **Layout Behavior**: The topbar remains fixed at the top while the main content area fills the remaining space below it.