Nextjs Core Headers

For the first part of the website that one of your potential clients will see, we’ve made the bellow header examples.

Description

We’ve made the following header components using various reactstrap components, and Bootstrap classes and also some custom scss/css classes.

Examples FREE

Traffic
350,897

3.48% Since last month

New users
2,356

3.48% Since last week

Sales
924

1.10% Since yesterday

Performance
49,65%

12% Since last month 

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import Header from "components/Headers/Header.js";

function Example() {
  return (
    <>
      <Header />
    </>
  );
}

export default Example;

UserHeader

Hello Jesse

This is your profile page. You can see the progress you've made with your work and manage your projects or assigned tasks

Edit profile 
import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import UserHeader from "components/Headers/UserHeader.js";

function Example() {
  return (
    <>
      <UserHeader />
    </>
  );
}

export default Example;

NOTE

You should note, that none of the above components are not dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.

Examples PRO

AlternativeHeader

Alternative
NewFilters 
import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import AlternativeHeader from "components/Headers/AlternativeHeader.js";

function Example() {
  return (
    <>
      <AlternativeHeader />
    </>
  );
}

export default Example;

Note

You should note, that none of the above component is not dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.

AuthHeader

Lock screen

Better to be safe than sorry. 

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import AuthHeader from "components/Headers/AuthHeader.js";

function Example() {
  return (
    <>
      <AuthHeader title="Lock screen" lead="Better to be safe than sorry." />
    </>
  );
}

export default Example;

Props

AuthHeader.propTypes = {
  title: PropTypes.string,
  lead: PropTypes.string,
};

CardsHeader

Default
NewFilters
Total traffic
350,897

3.48% Since last month

New users
2,356

3.48% Since last month

Sales
924

3.48% Since last month

Performance
49,65%

3.48% Since last month 

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import CardsHeader from "components/Headers/CardsHeader.js";

function Example() {
  return (
    <>
      <CardsHeader name="Dashboard" parentName="Default" />
    </>
  );
}

export default Example;

Props

CardsHeader.propTypes = {
  name: PropTypes.string,
  parentName: PropTypes.string,
};

IndexHeader

Argon Dashboard PRO React

A beautiful premium dashboard for Bootstrap 4, React and Reactstrap.

Argon perfectly combines reusable HTML and modular CSS with a modern styling and beautiful markup throughout each HTML template in the pack.

Purchase now
Components

Argon comes with over 70 handcrafted components.

Plugins

Fully integrated and extendable third-party plugins that you will love.

Pages

From simple to complex, you get a beautiful set of 15+ page examples.

Documentation

You will love how easy is to to work with Argon. 

import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import IndexHeader from "components/Headers/IndexHeader.js";

function Example() {
  return (
    <>
      <IndexHeader />
    </>
  );
}

export default Example;

Note

You should note, that none of the above component is not dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.

ProfileHeader

Hello Jesse

This is your profile page. You can see the progress you've made with your work and manage your projects or assigned tasks

Edit profile 
import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import ProfileHeader from "components/Headers/ProfileHeader.js";

function Example() {
  return (
    <>
      <ProfileHeader />
    </>
  );
}

export default Example;

Note

You should note, that none of the above component is not dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.

RTLProfileHeader

مرحبا جيسي

هذه هي صفحة ملفك الشخصي. يمكنك رؤية التقدم الذي أحرزته في عملك وإدارة مشاريعك أو المهام المعينة

تعديل الملف الشخصي 
import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import RTLProfileHeader from "components/Headers/RTLProfileHeader.js";

function Example() {
  return (
    <>
      <RTLProfileHeader />
    </>
  );
}

export default Example;

Note

You should note, that none of the above component is not dynamic, as we do not know what your end use case will be. Feel free to change it, add your own props and dynamic code.

SimpleHeader

Timeline 
import React from "react";

// reactstrap components
// import {
//
// } from "reactstrap";

// Core Components
import SimpleHeader from "components/Headers/SimpleHeader.js";

function Example() {
  return (
    <>
      <SimpleHeader name="Timeline" parentName="Pages" />
    </>
  );
}

export default Example;

Props

SimpleHeader.propTypes = {
  name: PropTypes.string,
  parentName: PropTypes.string,
};