Navbar 导航栏

导航栏在应用中作为顶部或底部导航的基础组件。

Navbar - H5UIh5ui.io

顶部导航栏

<!-- 绿色导航栏 -->
<header class="h5ui-bar bar-green">
    <a class="h5ui-bar_item pull-left" href="">
        <i class="h5ui-bar_arrow_left"></i>
        返回
    </a>
    <a class="h5ui-bar_item pull-right" href="">
        操作
    </a>
    <h1 class="h5ui-bar_title">导航栏</h1>
</header>

<!-- 默认导航栏 -->
<header class="h5ui-bar">
    <a class="h5ui-bar_item pull-left" href="">
        <i class="h5ui-bar_arrow_left"></i>
        返回
    </a>
    <a class="h5ui-bar_item pull-right" href="">
        操作
    </a>
    <h1 class="h5ui-bar_title">导航栏</h1>
</header>

底部导航栏

<footer class="h5ui-bar bar-fixed">
    <a href="" class="h5ui-bar_item active">
        <i class="h5ui-bar_icon">
            <img src="https://s.h5ui.io/img/mark-green.png" width="100%">
        </i>
        <span>首页</span>
    </a>
    <a href="" class="h5ui-bar_item">
        <i class="h5ui-bar_icon">
            <img src="https://s.h5ui.io/img/mark.png" width="100%">
            <span class="h5ui-badge h5ui-badge_dot"></span>
        </i>
        <span>动态</span>
    </a>
    <a href="" class="h5ui-bar_item">
        <i class="h5ui-bar_icon">
            <img src="https://s.h5ui.io/img/mark.png" width="100%">
        </i>
        <span>发起</span>
    </a>
    <a href="" class="h5ui-bar_item">
        <i class="h5ui-bar_icon">
            <img src="https://s.h5ui.io/img/mark.png" width="100%">
            <span class="h5ui-badge">8</span>
        </i>
        <span>我</span>
    </a>
</footer>