底部导航栏固定在页面底部，可以拥有 3 - 5 个选项。它通常只在手机上使用。每个页面只能拥有一个底部导航栏。

只需编写 HTML 即可生效。

Material Design 底部导航设计规范

下面的例子同时显示图标和文本，通常在只有 3 个导航项时使用。

含类 .mdui-bottom-nav-active 的导航项将处于默认激活状态。

在线运行

在线运行

在线运行

在  元素上添加类 .mdui-bottom-nav-text-auto 即可实现该效果。

一般在拥有 4 - 5 个导航项时，使用这种方式。默认只显示图标，在激活导航项后显示文本。

在线运行

在  元素上添加类 .mdui-color-[color] 即可为底部导航栏赋予背景色。

在线运行

在 body 元素上添加类 .mdui-bottom-nav-fixed 即可将底部导航栏固定在页面底部，不随滚动条滚动。

这个类需要添加在 body 元素上，而不是 .mdui-bottom-nav 元素上，因为它除了固定应用栏外，还会为 body 添加 padding-bottom，使底部导航栏不会覆盖页面内容。

添加类 .mdui-bottom-nav-scroll-hide 即可在页面向下滚动时隐藏底部导航栏，向上滚动时显示底部导航栏。

注意：若底部导航栏没有固定在页面底部，则该功能不会生效。

在线运行