Documentation
Header
Here is how you can change header as by-default settings in vue:
You will found header in
./src/components/custom/navbar/DefaultNavbar.vuefile,DefaultNavbar.vueis the default header file for the dashboard, we have used another sub-header fileSubHeader.vuein our dashboard as default
<template>
<nav :class="`nav navbar navbar-expand-lg navbar-light iq-navbar ${headerNavbar}`">
<div class="container-fluid navbar-inner">
<slot></slot>
<div class="input-group search-input" v-if="isSearch">
<span class="input-group-text" id="search-input">
<icon-component type="outlined" :size="18" icon-name="search"></icon-component>
</span>
<input type="search" class="form-control" placeholder="Search..." />
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon">
<span class="mt-2 navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="mb-2 navbar-nav ms-auto align-items-center navbar-list mb-lg-0">
<li class="me-0 me-xl-2" v-if="isGoPro">
<a class="btn btn-primary btn-sm d-flex gap-2 align-items-center" aria-current="page" href="http://hopeui.iqonic.design/pro?utm_source=hopeui-free-demo&utm_medium=hopeui-free-demo&utm_campaign=hopeui-pro-launch" target="_blank">
<icon-component type="outlined" :size="16" icon-name="location-arrow"></icon-component>
Go Pro
</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="search-toggle nav-link" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="@/assets/images/Flag/flag001.png" class="img-fluid rounded-circle" alt="user" style="height: 30px; min-width: 30px; width: 30px" />
<span class="bg-primary"></span>
</a>
<div class="p-0 sub-drop dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton2">
<b-card no-body class="m-0 border-0 shadow-none">
<div class="p-0">
<ul class="list-group list-group-flush p-0">
<li class="iq-sub-card list-group-item">
<a class="p-0" href="#"><img src="@/assets/images/Flag/flag-03.png" alt="img-flaf" class="img-fluid me-2" style="width: 15px; height: 15px; min-width: 15px" />Spanish</a>
</li>
<li class="iq-sub-card list-group-item">
<a class="p-0" href="#"><img src="@/assets/images/Flag/flag-04.png" alt="img-flaf" class="img-fluid me-2" style="width: 15px; height: 15px; min-width: 15px" />Italian</a>
</li>
<li class="iq-sub-card list-group-item">
<a class="p-0" href="#"><img src="@/assets/images/Flag/flag-02.png" alt="img-flaf" class="img-fluid me-2" style="width: 15px; height: 15px; min-width: 15px" />French</a>
</li>
<li class="iq-sub-card list-group-item">
<a class="p-0" href="#"><img src="@/assets/images/Flag/flag-05.png" alt="img-flaf" class="img-fluid me-2" style="width: 15px; height: 15px; min-width: 15px" />German</a>
</li>
<li class="iq-sub-card list-group-item">
<a class="p-0" href="#"><img src="@/assets/images/Flag/flag-06.png" alt="img-flaf" class="img-fluid me-2" style="width: 15px; height: 15px; min-width: 15px" />Japanese</a>
</li>
</ul>
</div>
</b-card>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" id="notification-drop" data-bs-toggle="dropdown">
<icon-component type="dual-tone" icon-name="bell"></icon-component>
<span class="bg-danger dots"></span>
</a>
<div class="p-0 sub-drop dropdown-menu dropdown-menu-end" aria-labelledby="notification-drop">
<b-card no-body class="m-0 shadow-none">
<div class="py-3 card-header d-flex justify-content-between bg-primary">
<b-card-title>
<h5 class="mb-0 text-white">All Notifications</h5>
</b-card-title>
</div>
<b-card-body class="p-0">
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/01.png" alt="" />
<div class="ms-3 w-100">
<h6 class="mb-0">Emma Watson Bni</h6>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-0">95 MB</p>
<small class="float-end font-size-12">Just Now</small>
</div>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<div class="">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/02.png" alt="" />
</div>
<div class="ms-3 w-100">
<h6 class="mb-0">New customer is join</h6>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-0">Cyst Bni</p>
<small class="float-end font-size-12">5 days ago</small>
</div>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/03.png" alt="" />
<div class="ms-3 w-100">
<h6 class="mb-0">Two customer is left</h6>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-0">Cyst Bni</p>
<small class="float-end font-size-12">2 days ago</small>
</div>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/04.png" alt="" />
<div class="w-100 ms-3">
<h6 class="mb-0">New Mail from Fenny</h6>
<div class="d-flex justify-content-between align-items-center">
<p class="mb-0">Cyst Bni</p>
<small class="float-end font-size-12">3 days ago</small>
</div>
</div>
</div>
</a>
</b-card-body>
</b-card>
</div>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link" id="mail-drop" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<icon-component type="dual-tone" icon-name="message"></icon-component>
<span class="bg-primary count-mail"></span>
</a>
<div class="p-0 sub-drop dropdown-menu dropdown-menu-end" aria-labelledby="mail-drop">
<b-card no-body class="m-0 shadow-none">
<div class="py-3 card-header d-flex justify-content-between bg-primary">
<b-card-title>
<h5 class="mb-0 text-white">All Message</h5>
</b-card-title>
</div>
<b-card-body class="p-0">
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<div class="">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/01.png" alt="" />
</div>
<div class="ms-3">
<h6 class="mb-0">Bni Emma Watson</h6>
<small class="float-start font-size-12">13 Jun</small>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<div class="">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/02.png" alt="" />
</div>
<div class="ms-3">
<h6 class="mb-0">Lorem Ipsum Watson</h6>
<small class="float-start font-size-12">20 Apr</small>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<div class="">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/03.png" alt="" />
</div>
<div class="ms-3">
<h6 class="mb-0">Why do we use it?</h6>
<small class="float-start font-size-12">30 Jun</small>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<div class="">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/04.png" alt="" />
</div>
<div class="ms-3">
<h6 class="mb-0">Variations Passages</h6>
<small class="float-start font-size-12">12 Sep</small>
</div>
</div>
</a>
<a href="#" class="iq-sub-card">
<div class="d-flex align-items-center">
<div class="">
<img class="avatar-40 rounded-pill bg-soft-primary p-1" src="@/assets/images/shapes/05.png" alt="" />
</div>
<div class="ms-3">
<h6 class="mb-0">Lorem Ipsum generators</h6>
<small class="float-start font-size-12">5 Dec</small>
</div>
</div>
</a>
</b-card-body>
</b-card>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link py-0 d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="@/assets/images/avatars/01.png" alt="User-Profile" class="theme-color-default-img img-fluid avatar avatar-50 avatar-rounded" />
<img src="@/assets/images/avatars/avtar_1.png" alt="User-Profile" class="theme-color-purple-img img-fluid avatar avatar-50 avatar-rounded" />
<img src="@/assets/images/avatars/avtar_2.png" alt="User-Profile" class="theme-color-blue-img img-fluid avatar avatar-50 avatar-rounded" />
<img src="@/assets/images/avatars/avtar_4.png" alt="User-Profile" class="theme-color-green-img img-fluid avatar avatar-50 avatar-rounded" />
<img src="@/assets/images/avatars/avtar_5.png" alt="User-Profile" class="theme-color-yellow-img img-fluid avatar avatar-50 avatar-rounded" />
<img src="@/assets/images/avatars/avtar_3.png" alt="User-Profile" class="theme-color-pink-img img-fluid avatar avatar-50 avatar-rounded" />
<div class="caption ms-3 d-none d-md-block">
<h6 class="mb-0 caption-title">Austin Robertson</h6>
<p class="mb-0 caption-sub-title">Marketing Administrator</p>
</div>
</a>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
<li><router-link class="dropdown-item" :to="{ name: 'default.user-profile' }">Profile</router-link></li>
<li><router-link class="dropdown-item" :to="{ name: 'default.user-privacy-setting' }">Privacy Setting</router-link></li>
<li><hr class="dropdown-divider" /></li>
<li><router-link class="dropdown-item" :to="{ name: 'auth.login' }">Logout</router-link></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</template>- We have used another sub-header file
SubHeader.vuein our dashboard as default
<template>
<div class="iq-navbar-header" style="height: 215px">
<b-container fluid class="iq-container">
<b-row>
<b-col md="12">
<div class="d-flex justify-content-between align-items-center flex-wrap">
<div>
<h1>Hello Hope!</h1>
<p>Experience a simple yet powerful way to build Dashboards with HOPE UI.</p>
</div>
<div>
<a href="" class="btn btn-link btn-soft-light">
<svg width="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.8251 15.2171H12.1748C14.0987 15.2171 15.731 13.985 16.3054 12.2764C16.3887 12.0276 16.1979 11.7713 15.9334 11.7713H14.8562C14.5133 11.7713 14.2362 11.4977 14.2362 11.16C14.2362 10.8213 14.5133 10.5467 14.8562 10.5467H15.9005C16.2463 10.5467 16.5263 10.2703 16.5263 9.92875C16.5263 9.58722 16.2463 9.31075 15.9005 9.31075H14.8562C14.5133 9.31075 14.2362 9.03619 14.2362 8.69849C14.2362 8.35984 14.5133 8.08528 14.8562 8.08528H15.9005C16.2463 8.08528 16.5263 7.8088 16.5263 7.46728C16.5263 7.12575 16.2463 6.84928 15.9005 6.84928H14.8562C14.5133 6.84928 14.2362 6.57472 14.2362 6.23606C14.2362 5.89837 14.5133 5.62381 14.8562 5.62381H15.9886C16.2483 5.62381 16.4343 5.3789 16.3645 5.13113C15.8501 3.32401 14.1694 2 12.1748 2H11.8251C9.42172 2 7.47363 3.92287 7.47363 6.29729V10.9198C7.47363 13.2933 9.42172 15.2171 11.8251 15.2171Z" fill="currentColor"></path>
<path opacity="0.4" d="M19.5313 9.82568C18.9966 9.82568 18.5626 10.2533 18.5626 10.7823C18.5626 14.3554 15.6186 17.2627 12.0005 17.2627C8.38136 17.2627 5.43743 14.3554 5.43743 10.7823C5.43743 10.2533 5.00345 9.82568 4.46872 9.82568C3.93398 9.82568 3.5 10.2533 3.5 10.7823C3.5 15.0873 6.79945 18.6413 11.0318 19.1186V21.0434C11.0318 21.5715 11.4648 22.0001 12.0005 22.0001C12.5352 22.0001 12.9692 21.5715 12.9692 21.0434V19.1186C17.2006 18.6413 20.5 15.0873 20.5 10.7823C20.5 10.2533 20.066 9.82568 19.5313 9.82568Z" fill="currentColor"></path>
</svg>
Announcements
</a>
</div>
</div>
</b-col>
</b-row>
</b-container>
<div class="iq-header-img">
<img src="@/assets/images/dashboard/top-header.png" alt="header" class="theme-color-default-img img-fluid w-100 h-100 animated-scaleX" />
<img src="@/assets/images/dashboard/top-header1.png" alt="header" class="theme-color-purple-img img-fluid w-100 h-100 animated-scaleX" />
<img src="@/assets/images/dashboard/top-header2.png" alt="header" class="theme-color-blue-img img-fluid w-100 h-100 animated-scaleX" />
<img src="@/assets/images/dashboard/top-header3.png" alt="header" class="theme-color-green-img img-fluid w-100 h-100 animated-scaleX" />
<img src="@/assets/images/dashboard/top-header4.png" alt="header" class="theme-color-yellow-img img-fluid w-100 h-100 animated-scaleX" />
<img src="@/assets/images/dashboard/top-header5.png" alt="header" class="theme-color-pink-img img-fluid w-100 h-100 animated-scaleX" />
</div>
</div>
</template>Only you have to add some classes in header parent section for making default header type, steps are given bellow:
Brush
We have created an object in ./src/store/setting/state.js in that state.setting
setting: {
app_name: 'Hope UI',
theme_scheme: 'light',
theme_scheme_direction: 'ltr',
theme_color: 'theme-color-default',
header_navbar: 'default',
sidebar_color: 'sidebar-white',
sidebar_type: [],
sidebar_menu_style: 'navs-rounded-all'
}Navbar Styles
For example you have to set navbar style as glass then you will have to add nav-glass class at state.setting.header_navbar of the ./src/store/setting/state.js
- For navbar style as nav-glass, you can add nav-glass in header_navbar
header_navbar: 'nav-glass', - For navbar style as navs-sticky, you can add navs-sticky in header_navbar
header_navbar: 'navs-sticky', - For navbar style as navs-transparent, you can add navs-transparent in header_navbar
header_navbar: 'navs-transparent', - For navbar style as navs-bg-color, you can add navs-bg-color in header_navbar
header_navbar: 'navs-bg-color',