App bar

The app bar is used to switch between the different top-level views of an app.

To see a detailed explanation of all existing helper classes, please refer to the usage table below.

App bar

<section class="appWrapper">
    <ul class="appWrapper__appBar">
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp person" aria-hidden="true"></span>
                <span class="item__title">Lorem</span>
            </a>
        </li>
        <li class="appBar__item is-activated">
            <a href="#">
                <span class="iconMdsp calendarDay" aria-hidden="true"></span>
                <span class="item__title">Ipsum</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp aspects" aria-hidden="true"></span>
                <span class="item__title">Dolor sit</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp asset" aria-hidden="true"></span>
                <span class="item__title">Amet tempor aliquam quctor</span>
            </a>
        </li>
        <li class="appBar__item is-disabled">
            <a href="#">
                <span class="iconMdsp calendar" aria-hidden="true"></span>
                <span class="item__title">Morbi et lobortis lacus sed tempor</span>
            </a>
        </li>
        <li class="appBar__item">
            <a href="#">
                <span class="iconMdsp globalSettings" aria-hidden="true"></span>
                <span class="item__title">Lobortis lacus sed tempor</span>
            </a>
        </li>
    </ul>

    <section class="main appWrapper__main">
        <section class="main__navigation">
        </section>

        <section class="main__region">
        </section>
    </section>
</section>

<script type="text/javascript" src="https://static.eu1.mindsphere.io/osbar/v4/js/main.min.js"></script>
<script>
    _msb.init({
        title: "App Layout",
        showLegal: true,
        polyfills: {
            promise: true
        }
    });
</script>

Usage

ElementClassDescription
.appBar__item .is-activated Highlights the current App bar item
.appBar__item .is-focused, :focus Visually highlights a (focused via keyboard navigation) element.
.appBar__item .is-disabled Disables an App bar item (visually and on hover)
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top