Tuff Docs

Top navigation bar for compact app surfaces. It provides a centered title, safe-area padding, left/right action slots, and an optional default back button.

Basic Usage

Demo will load when visible.

<script setup lang="ts">
</script>

<template>
  <div style="width: 360px; border: 1px solid var(--tx-border-color); border-radius: 12px; overflow: hidden;">
    <TxNavBar title="Title" :show-back="true" @back="() => {}">
      <template #right>
        <TxButton variant="ghost" size="small">
          Edit
        </TxButton>
      </template>
    </TxNavBar>

    <div style="padding: 16px; color: var(--tx-text-color-secondary);">
      Content
    </div>
  </div>
</template>

API

Props

Prop	Type	Default	Description
`title`	`string`	`''`	Text rendered in the default title area.
`fixed`	`boolean`	`false`	Uses sticky positioning at the top of the viewport.
`safeAreaTop`	`boolean`	`true`	Adds a safe-area spacer above the bar for notched displays.
`showBack`	`boolean`	`false`	Shows the built-in back button when the `left` slot is not provided.
`disabled`	`boolean`	`false`	Disables back/left/right click emissions and marks the back button disabled.
`zIndex`	`number`	`2000`	CSS z-index exposed through `--tx-nav-bar-z-index`.

Slots

Name	Description
`left`	Replaces the default left area and built-in back button.
`title`	Replaces the centered title content.
`right`	Renders right-aligned actions.

Events

Event	Params	Description
`back`	-	Emitted when the built-in back button is clicked.
`click-left`	-	Emitted when the left area is clicked; the built-in back button also emits it.
`click-right`	-	Emitted when the right area is clicked.