Toolbars

Leiste oben (Navbar) oder unten (Tabbar) am Bildschirm, beinhaltet Navigations-Elemente

Navbar mit Navigation und Titel

Top Bar mit Links und Webapp-Titel
<!-- html-code -->
<nav id="top-bar">
    <button onclick="window.history.back()" class="link link-back"></button>
    SuperMovies
    <a href="/search" class="link link-search"></a>
</nav>
/* css-code */
#top-bar {
    background-color:#ffc800;
    height: 2.5rem;
    position:fixed;
    top:0;
    width:100%;
    color:white;
    font-size: 1.5rem;
    text-align: center;
    padding-top:0.5rem;
}

#top-bar .link {
    display: block;
    width: 2rem;
    height: 2rem;
    background-size:2rem;
    background-repeat:no-repeat;
}

#top-bar .link-back {
    float:left;
    margin-left:1rem;
    background-image: url("/static/icon-chevron-left.svg");
}

#top-bar .link-search {
    float:right;
    margin-right:1rem;
    background-image: url("/static/icon-search.svg");
}

Tabbar unten mit Icons

Tab bar mit vier Icon-Links
<!-- html-code -->
<nav id="tab-bar">
    <a href="rate.html" class="icon icon-star-o"></a>
    <a href="actor.html" class="icon icon-user"></a>
    <a href="likes.html" class="icon icon-thumbs-up"></a>
    <a href="movies.html" class="icon icon-film"></a>
</nav>
/* css-code */
#tab-bar {
    background-color:#ffc800;
    height: 3rem;
    position:fixed;
    bottom:0;
    width:100%;
    color:white;
    padding:0;
    margin:0;
    display: flex;
}

#tab-bar .icon {
    text-align: center;
    flex-basis: 25%;
    text-decoration:none;
    color:white;
    background-position: center center;
    background-size:2rem;
    background-repeat:no-repeat;
}

#tab-bar .icon-star-o {
    background-image: url("icon-star-o.svg");
}

#tab-bar .icon-user {
    background-image: url("icon-user.svg");
}

#tab-bar .icon-film {
    background-image: url("icon-film.svg");
}

#tab-bar .icon-thumbs-up {
    background-image: url("icon-thumbs-up.svg");
}