跳到主要内容
前端术语库

UI 组件 · 导航

底部标签栏

Bottom Tab Bar

也叫：底部导航栏、底部导航、底部 Tab、TabBar、Bottom Navigation、Bottom Nav

手机应用和移动网页底部固定的一排 3~5 个图标加文字，用来在几个最主要的页面之间切换。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

给这个移动端页面加一个底部标签栏：fixed 固定在屏幕底部，高 56px 再加 env(safe-area-inset-bottom)，白底、顶部 1px 分隔线。放 4 个等宽入口「首页、发现、消息、我的」，每个是 24px 线性图标加 11px 文字，上下排列；当前页的图标换成实心，图标和文字用主色，其余灰色。「消息」图标右上角显示红色未读数徽标。进入详情页时隐藏标签栏；页面底部加 72px 内边距，避免内容被挡住；宽度大于 768px 时隐藏它，改用顶部导航栏。

发给

01判断

你的内容是这样吗？

对照两列，确认底部标签栏是不是你要找的。

符合这些情况，用底部标签栏

  • 手机应用或移动网页有 3~5 个最常用的一级页面，需要随时切换时
  • 用户多是单手操作，入口要放在拇指容易点到的屏幕底部
  • 需要在某个入口上提醒新消息、购物车数量这类未读状态时

是这些情况，换成别的

  • 桌面宽屏页面

    改用顶部导航栏侧边菜单

  • 一级入口超过 5 个，底部放不下，应该精简或改用抽屉菜单

  • 详情、下单这类二级页面，应该让位给返回按钮和底部操作栏

    改用底部操作栏

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    塞了六七个入口，每个只剩一个小图标，文字被截断，手指也点不准

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    只有图标没有文字，用户猜不出每个图标代表哪个页面

  3. 03

    标签栏固定在底部却没给页面留空间，列表最后几条永远被挡住

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由固定在屏幕底部的横向容器和 3~5 个等宽入口组成，每个入口是图标加短文字，当前入口高亮，可以带徽标。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1手机屏幕最底部一排 3~5 个等宽图标，每个图标下面有两个字
  2. 2其中一个图标和文字是主色或实心，其余是灰色
  3. 3顶部有一条细分隔线，页面滚动时它固定不动

04解释

详细解释

底部标签栏是手机上最常见的主导航：屏幕最下面一排 3~5 个入口，每个是图标加两个字的名称，例如「首页、分类、购物车、消息、我的」。当前页的图标变成实心、文字变成主色，其余是灰色；有新消息时图标右上角挂一个徽标。它在拇指最容易够到的地方，在哪个页面都能一下切过去。

它和 标签页 名字很像，但层级不同：标签页在页面内部切换几块内容；底部标签栏切换的是整个应用的几个一级页面，相当于手机版的 顶部导航栏 或 侧边菜单。它和 底部操作栏 都贴在底部，但操作栏放的是「提交、购买」这类动作按钮，不是页面入口。

入口控制在 3~5 个，每个都要有文字，不能只放图标。它只出现在一级页面，进入详情、下单这类二级页面时要隐藏，让位给返回按钮或底部操作栏。固定在底部会盖住内容，页面要留出相同高度的底部内边距，并加上 iPhone 底部安全区的高度。宽屏上改用顶部导航栏或侧边菜单。

开发者信息
术语 ID
component-bottom-tab-bar
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • .van-tabbar
  • .adm-tab-bar
  • .weui-tabbar
  • .nut-tabbar
  • .t-tab-bar
  • [class*="MuiBottomNavigation-root"]
  • ion-tab-bar
  • nav.fixed-bottom
  • nav.fixed.bottom-0
  • nav.sticky.bottom-0
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • bottom-tab-bar
  • bottom-tabs
  • bottom-nav
  • bottom-navigation
  • tab-bar
  • tabbar
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • TabBar
  • BottomNavigation
  • BottomNav
  • BottomTabBar
  • BottomTabs
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • <nav>
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 固定在底部
  • 重复子项
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30