Navbar 导航栏

Layout · Display component

Page navigation bars.

On-demand importwbbb-ui/components/navbar

Basic Usage

Example code

<script setup lang="ts">
import { WbbbNavbar } from 'wbbb-ui/components/navbar'
import 'wbbb-ui/styles/navbar'
</script>

<template>
  <WbbbNavbar />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultContent

API Reference

Props

Property	Description	Type	Default	Required
border	Controls whether a separator or border is displayed.	boolean	true	No
fixed	Fixes the component to its viewport position.	boolean	false	No
leftArrow	Shows a back arrow on the left side.	boolean	false	No
leftText	Sets the text shown on the left side.	string	''	No
placeholder	Sets placeholder text when no value is present.	boolean	false	No
rightText	Sets the text shown on the right side.	string	''	No
safeAreaTop	Adds padding for the device top safe area.	boolean	true	No
title	Sets the component title text.	string	''	No

Events

• clickLeft
• clickRight

Slots

• left
• title
• right

Two-way binding

Does not support v-model.

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.