Header

Basic

Header with empty container. You can create what you want.

The header
<mu-header :pure="true">
    The header
</mu-header>
1
2
3

With slots

You can pass content in left, right and center slots.

Left
Center
Right
<mu-header>
    <template slot="left">Left</template>
    <template slot="center">Center</template>
    <template slot="right">Right</template>
</mu-header>
1
2
3
4
5

With <mu-links-menu></mu-links-menu> you can create simply menu

<mu-header>
    <template slot="left">
        <mu-links-menu>
            <a href="#" class="dark">Shops</a>
            <mu-dropdown className="mu-header__actions">
                <template slot="button">
                    Actions
                </template>
                <template slot="body">
                    <div class="mu-header__extend-menu">

                        <a href="#" rel="nofollow" class="extend-menu__item">
                            <span class="extend-menu__images">
                                <img src="https://source.unsplash.com/user/erondu/168x78" alt="" />
                            </span>
                            <span class="extend-menu__title">
                                <span>Lorem ipsum</span>
                            </span>
                            <span class="extend-menu__subTitle">
                                <span>dolor sit amet, consectetur adipiscing elit...</span>
                            </span>
                        </a>

                        <a href="#" rel="nofollow" class="extend-menu__item">
                            <span class="extend-menu__images">
                                <img src="https://source.unsplash.com/user/tomsdg/168x78" alt="" />
                            </span>
                            <span class="extend-menu__title">
                                <span>Lorem ipsum</span>
                            </span>
                            <span class="extend-menu__subTitle">
                                <span>dolor sit amet, consectetur adipiscing elit...</span>
                            </span>
                        </a>

                        <a href="#" rel="nofollow" class="extend-menu__item">
                            <span class="extend-menu__images">
                                <img src="https://source.unsplash.com/user/maddibazzocco/168x78" alt="" />
                            </span>
                            <span class="extend-menu__title">
                                <span>Lorem ipsum</span>
                            </span>
                            <span class="extend-menu__subTitle">
                                <span>dolor sit amet, consectetur adipiscing elit...</span>
                            </span>
                        </a>

                        <a href="#" rel="nofollow" class="extend-menu__item">
                            <span class="extend-menu__images">
                                <img src="https://source.unsplash.com/user/draymoore/168x78" alt="" />
                            </span>
                            <span class="extend-menu__title">
                                <span>Lorem ipsum</span>
                            </span>
                            <span class="extend-menu__subTitle">
                                <span>dolor sit amet, consectetur adipiscing elit...</span>
                            </span>
                        </a>

                        <a href="#" rel="nofollow" class="extend-menu__item">
                            <span class="extend-menu__images">
                                <img src="https://source.unsplash.com/user/ts_imagery/168x78" alt="" />
                            </span>
                            <span class="extend-menu__title">
                                <span>Lorem ipsum</span>
                            </span>
                            <span class="extend-menu__subTitle">
                                <span>dolor sit amet, consectetur adipiscing elit...</span>
                            </span>
                        </a>
                    </div>
                </template>
            </mu-dropdown>

            <a href="#" class="dark">Help</a>
            <a href="#" class="dark">Products</a>
        </mu-links-menu>

    </template>
</mu-header>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

Mobile menu

TIP

Resize window before use this demo

<mu-header>
    <template slot="left">
        <mu-side-nav :showMobileMenu="showMobileMenu" v-on:input="toggleMenu">
            <template>
                <div class="some-content">Some content</div>
            </template>
        </mu-side-nav>
    </template>
</mu-header>
1
2
3
4
5
6
7
8
9
export default {
    data() {
        return {
            showMobileMenu: false,
        };
    },
    methods: {
        toggleMenu() {
            this.showMobileMenu = !this.showMobileMenu
        },
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
.some-content {
    padding: 30px;
    padding: 30px;
    background: #fff;
    border: 1px solid #f5f6fa;
    box-shadow: 0 0 8px 0 rgba(232, 237, 250, .6), 0 2px 4px 0 rgba(232, 237, 250, .5)
}
1
2
3
4
5
6
7