Basic example

Basic example of page header.

Subheading

Page Title

import React, { useState } from 'react'
import { Button } from 'react-bootstrap'
import { Droplet } from 'react-feather'

const BasicExample = () => {
  return (
    <div className="hk-pg-header">
        <div className="d-flex">
            <div className="avatar avatar-icon avatar-soft-danger d-10 me-3">
                <span className="initial-wrap">
                    <span className="feather-icon">
                        <Droplet />
                    </span>
                </span>
            </div>
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <div className="pg-subtitle">
                        Subheading
                    </div>
                    <h1 className="pg-title">Page Title</h1>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default BasicExample;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page header with breadcrumb

You can add breadcrumb with page header component.

Preview

Jsx

Page Title

import React, { useState } from 'react'
import { Breadcrumb, Button } from 'react-bootstrap'
import { Droplet } from 'react-feather'

const HeaderWithBreadcrumb = () => {
  return (
    <div className="hk-pg-header">
        <div className="d-flex">
            <div className="avatar avatar-icon avatar-soft-danger d-10 me-3">
                <span className="initial-wrap">
                    <span className="feather-icon">
                        <Droplet />
                    </span>
                </span>
            </div>
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <nav aria-label="breadcrumb">
                        <Breadcrumb>
                            <Breadcrumb.Item href="#">
                                Homepage
                            </Breadcrumb.Item>
                            <Breadcrumb.Item active>Dashboard</Breadcrumb.Item>
                        </Breadcrumb>
                    </nav>
                    <h1 className="pg-title">Page Title</h1>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default HeaderWithBreadcrumb;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page header with text

You can add text line using <p> tag.

Preview

Jsx

Page Title

This is a dummy text for more context.

import React, { useState } from 'react'
import { Button } from 'react-bootstrap'
import { Droplet } from 'react-feather'

const HeaderWithText = () => {
  return (
    <div className="hk-pg-header">
        <div className="d-flex">
            <div className="avatar avatar-icon avatar-soft-danger d-10 me-3">
                <span className="initial-wrap">
                    <span className="feather-icon">
                        <Droplet />
                    </span>
                </span>
            </div>
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <h1 className="pg-title">Page Title</h1>
                    <p>This is a dummy text for more context.</p>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default HeaderWithText;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page header simple

Remove icon avatar for simple page header layout.

Preview

Jsx

Page Title

This is a dummy text for more context.

import React, { useState } from 'react'
import { Button } from 'react-bootstrap'
import { Droplet } from 'react-feather'

const SimplePageHeader = () => {
  return (
    <div className="hk-pg-header">
        <div className="d-flex">
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <h1 className="pg-title">Page Title</h1>
                    <p>This is a dummy text for more context.</p>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default SimplePageHeader;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page header with stats

Add stats block using .pg-stats-group.

Preview

Jsx

Page Title

Statistics●Statistics Number

import React, { useState } from 'react'
import { Button } from 'react-bootstrap'

const PageHeaderWithStats = () => {
  return (
    <div className="hk-pg-header">
        <div className="d-flex">
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <h1 className="pg-title">Page Title</h1>
                    <div className="pg-stats-group">
                        <span className="stats-symbol"><span className="feather-icon"><i data-feather="mail" /></span></span><span className="stats-title">Statistics</span><span className="stats-dot-sep">●</span><span className="stats-title">Statistics Number</span>
                    </div>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default PageHeaderWithStats;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page header with badge

Add the badge element with header to enhance the layout.

Preview

Jsx

Page Title

Badge

This is a dummy text for more context.

import React, { useState } from 'react'
import { Button } from 'react-bootstrap'
import NubraBadge from '../../../components/@nubra-badge/@nubra-badge'

const PageHeaderWithBadge = () => {
  return (
    <div className="hk-pg-header">
        <div className="d-flex">
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <div className="d-flex align-items-center">
                        <h1 className="pg-title">Page Title</h1>
                        <NubraBadge bg="primary" soft className="ms-3">Badge</NubraBadge>
                    </div>
                    <p>This is a dummy text for more context.</p>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
    </div>
  )
}

export default PageHeaderWithBadge;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page header with tabs

Add the class .pg-header-wth-tab with .hk-pg-header, to add tabs in page header.

Preview

Jsx

Page Title

This is a dummy text for more context.

Tab Link

Active Tab

Tab Link

import React, { useState } from 'react'
import { Button, Nav } from 'react-bootstrap'

const PageHeaderWithTabs = () => {
  return (
    <div className="hk-pg-header pg-header-wth-tab">
        <div className="d-flex">
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <h1 className="pg-title">Page Title</h1>
                    <p>This is a dummy text for more context.</p>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
        <Nav variant="tabs" className="nav-line nav-light" defaultActiveKey="link-2">
            <Nav.Item>
                <Nav.Link eventKey="link-1">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">
                    <span className="nav-link-text">Active Tab</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-3">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-4">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
        </Nav>
    </div>
  )
}

export default PageHeaderWithTabs;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page header dark

Add the class .pg-header-dark with .hk-pg-header, to add dark mode.

Preview

Jsx

Page Title

This is a dummy text for more context.

Tab Link

Active Tab

Tab Link

import React, { useState } from 'react'
import { Button, Nav } from 'react-bootstrap'

const PageHeaderDark = () => {
  return (
    <div className="hk-pg-header pg-header-wth-tab pg-header-dark bg-sky-dark-5 p-3 pb-0 rounded-4">
        <div className="d-flex">
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <h1 className="pg-title">Page Title</h1>
                    <p>This is a dummy text for more context.</p>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
        <Nav variant="tabs" className="nav-line nav-light" defaultActiveKey="link-2">
            <Nav.Item>
                <Nav.Link eventKey="link-1">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">
                    <span className="nav-link-text">Active Tab</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-3">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-4">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
        </Nav>
    </div>
  )
}

export default PageHeaderDark;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page header with image

Add the class .pg-header-wth-img with .hk-pg-header, to add image background.

Preview

Jsx

Page Title

This is a dummy text for more context.

Tab Link

Active Tab

Tab Link

import React, { useState } from 'react'
import { Button, Nav } from 'react-bootstrap'

const PageHeaderWithImage = () => {
  return (
    <div className="hk-pg-header pg-header-wth-tab pg-header-wth-img pg-header-dark bg-sky-dark-5 p-3 pb-0 rounded-4 overflow-hidden">
        <div className="d-flex">
            <div className="d-flex flex-wrap justify-content-between flex-1">
                <div className="mb-md-0 mb-2 me-8">
                    <h1 className="pg-title">Page Title</h1>
                    <p>This is a dummy text for more context.</p>
                </div>
                <div className="pg-header-action-wrap">
                    <Button variant="outline-secondary" className="me-3">Secondary</Button>
                    <Button variant="primary">Primary</Button>
                </div>
            </div>
        </div>
        <Nav variant="tabs" className="nav-line nav-light" defaultActiveKey="link-2">
            <Nav.Item>
                <Nav.Link eventKey="link-1">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-2">
                    <span className="nav-link-text">Active Tab</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-3">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
            <Nav.Item>
                <Nav.Link eventKey="link-4">
                    <span className="nav-link-text">Tab Link</span>
                </Nav.Link>
            </Nav.Item>
        </Nav>
    </div>
  )
}

export default PageHeaderWithImage;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Page Header

Basic example

Page Title

Page header with breadcrumb

Page Title

Page header with text

Page Title

Page header simple

Page Title

Page header with stats

Page Title

Page header with badge

Page Title

Page header with tabs

Page Title

Page header dark

Page Title

Page header with image

Page Title