# Appbar

an Appbar is a top-of-the screen container providing consistent navigation screen titles & core actions.\
it provides a set of actions / tools which are relevant to the user current task or view .

when to use Appbar :

* simple actions
* compact content
* brand recognition (showing logo /name etc)

When to avoid Appbar :

* primary actions
* rarely used actions
* too many actions

> For deeper reference, check out [Mobbin](https://mobbin.com/glossary/top-navigation-bar) guide on accordions.

<figure><img src="/files/tigD8WBMSUGc6cJB9uHF" alt="Appbar example image"><figcaption></figcaption></figure>

| Slot    | Description                                      |
| ------- | ------------------------------------------------ |
| `title` | title of the appbar often brand name or appname. |

## Basic Example

```kotlin

Scaffold(
    appBar = {
        Appbar(
            title = {
                Text("Kore")
            },
            navigationIcon = {
                GhostIconButton(
                    onClick = {},
                    content = {
                        Icon(
                            imageVector = PhIcons.Regular.CaretLeft,
                            contentDescription = ""
                        )
                    }
                )
            },
            appBarAction = {
                GhostIconButton(
                    onClick = {},
                    content = {
                        Icon(
                            imageVector = PhIcons.Regular.DotsThreeVertical,
                            contentDescription = ""
                        )
                    }
                )
            })

    })

```

## Styling

appbar exposes several param to customize the component

### Parameters

| Parameter                 | Type                                 | Default                                     | Description                                              |
| ------------------------- | ------------------------------------ | ------------------------------------------- | -------------------------------------------------------- |
| `title`                   | `@Composable () -> Unit`             | —                                           | The main text or component of the app bar.               |
| `modifier`                | `Modifier`                           | `Modifier`                                  | Applied to the root container.                           |
| `navigationIcon`          | `@Composable (() -> Unit)?`          | `null`                                      | Icon rendered on the start side of the app bar.          |
| `navigationIconAlignment` | `Alignment.Vertical`                 | `Alignment.CenterVertically`                | Vertical alignment of the navigation icon.               |
| `appBarAction`            | `@Composable (RowScope.() -> Unit)?` | `null`                                      | Actions rendered on the end side. Provides a `RowScope`. |
| `appBarAlignment`         | `Alignment.Vertical`                 | `Alignment.CenterVertically`                | Vertical alignment of the app bar actions.               |
| `windowInsets`            | `WindowInsets`                       | `WindowInsets.statusBars`                   | Insets to apply to the app bar (handles system UI).      |
| `contentPadding`          | `PaddingValues`                      | `AppBarDefaults.defaultTopAppBarPadding`    | Padding applied to the internal content slot.            |
| `minimumAppBarHeight`     | `Dp`                                 | `AppBarDefaults.defaultAppBarMinimumHeight` | The minimum height constraint for the app bar.           |
| `elevation`               | `Dp`                                 | `AppBarDefaults.defaultAppBarElevation`     | Shadow elevation applied to the app bar surface.         |

### Multiple Actions & Elevation

Because `appBarAction` provides a `RowScope`, you can easily stack multiple action icons side-by-side. You can also increase the `elevation` to cast a stronger shadow over the content below.

```kotlin
Appbar(
    title = { Text("Settings") },
    elevation = 8.dp,
    navigationIcon = {
        IconButton(onClick = { }) {
            Icon(imageVector = PhIcons.Bold.CaretLeft, contentDescription = "Back")
        }
    },
    appBarAction = {
        GhostIconButton(
            onClick = {},
            content = {
                Icon(
                    imageVector = PhIcons.Regular.DotsThreeVertical,
                    contentDescription = ""
                )
            }
        )
        GhostIconButton(
            onClick = {},
            content = {
                Icon(
                    imageVector = PhIcons.Regular.Bell,
                    contentDescription = ""
                )
            }
        )
    }
)
```

### Custom Heights and Padding

You can override the default dimensions to create a taller, more spacious app bar ,often useful for specific branding requirements or larger typography.

```kotlin
Appbar(
    title = {
        Text(text = "Dashboard", style = MaterialTheme.typography.headlineMedium)
    },
    minimumAppBarHeight = 80.dp,
    contentPadding = PaddingValues(horizontal = 24.dp, vertical = 12.dp),
    navigationIcon = {
        Icon(imageVector = PhIcons.Bold.House, contentDescription = "Home")
    }
)


```


---

# 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://kore-1.gitbook.io/kore/documentation/navigation/appbar.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.