ViboDesign
CATEGORY

认导航

导航与跳转 · 14 个词条

导航菜单

Menu / Nav Menu

页面顶部或侧边的一排入口,帮你在网站各个板块之间认路、切换。

汉堡菜单

Hamburger Menu

三条横线叠成的小图标,点开后才露出完整菜单,专门给窄屏幕省地方。

当前位置:词条

面包屑

Breadcrumb

页面顶部一串带斜杠的路径,告诉你当前在哪一层,点任意一级能跳回去。

分页

Pagination

列表底下的一排页码按钮,内容太多时分页展示,点数字或箭头翻页。

这里是概览内容,展示词条的核心信息。

标签页

Tabs

一排并排的页签,点哪个就切换到哪个面板,不用跳页面就能换内容。

分段控件

Segmented Control

一整条被切成几段的按钮,选中某段就高亮,常用来切换视图或筛选条件。

1填写信息
2确认订单
3完成

步骤条

Steps

把多步流程横着排成一条进度,告诉你现在走到第几步、还剩几步。

下拉菜单

Dropdown

点一下按钮才展开的选项列表,选中或用完就收起,不占平时的地方。

1 行占位文本,向下滚动查看回到顶部按钮。

2 行占位文本,向下滚动查看回到顶部按钮。

3 行占位文本,向下滚动查看回到顶部按钮。

4 行占位文本,向下滚动查看回到顶部按钮。

5 行占位文本,向下滚动查看回到顶部按钮。

6 行占位文本,向下滚动查看回到顶部按钮。

7 行占位文本,向下滚动查看回到顶部按钮。

8 行占位文本,向下滚动查看回到顶部按钮。

9 行占位文本,向下滚动查看回到顶部按钮。

10 行占位文本,向下滚动查看回到顶部按钮。

11 行占位文本,向下滚动查看回到顶部按钮。

12 行占位文本,向下滚动查看回到顶部按钮。

回到顶部

BackTop

页面往下滚一段后,右下角浮出的小按钮,点一下嗖地回到最顶上。

命令面板

Command Palette

按 Cmd+K 呼出的居中搜索框,打字就能搜功能、跳页面,不用翻菜单。

meatballs ⋯ / kebab ⋮

项目计划

一份关于设计系统落地的季度计划草稿。

点击右侧三点图标

溢出菜单

Overflow Menu

放不下的次要操作全塞进「⋯」按钮里,点开一个小菜单,省地方。

快速入口

你可以先阅读组件词典,再查看最佳实践

最近访问:文档首页

链接

Link

把用户带去另一个页面、锚点或资源地址的可点击文本或元素。

介绍

Demo

FAQ

锚点导航

Anchor

在同一页面内跳到指定区块的导航方式,常见于长文档、官网落地页和目录侧栏。

跳到正文
Header / Navbar / Search

Main Content

按 Tab 聚焦后,Skip Link 会从顶部出现并直接跳到这里。

跳过导航链接

Skip Link

给键盘和读屏用户用的快捷链接,允许他们直接跳过重复导航,进入正文主内容。

认导航 · ViboDesign