Global Navbar System

A reusable, responsive, enterprise-grade navigation system built using Web Components. Update your navbar once and use it across every application instantly.

Why Use This Navbar System?

Centralized Updates

Update the navbar once and every connected application gets the latest version instantly.

Responsive Design

Automatically adapts for desktop, tablet, and mobile devices.

Easy Integration

Add one script and one component. Setup takes less than 2 minutes.

Fully Customizable

Themes, colors, logos, links, buttons, and layouts are all configurable.

Quick Start

Add the navbar component:

<company-navbar></company-navbar>

Configure Navbar

window.CompanyNavbarConfig = {

  companyName: "MyApp",

  subheading: "Enterprise Solutions",

  theme: "dark",

  maxVisibleItems: 4,

  links: [
    {
      label: "Home",
      href: "#",
      icon: "fas fa-home"
    },
    {
      label: "Features",
      href: "#",
      icon: "fas fa-star"
    }
  ]
};

Load Navbar CSS & Script

<!-- Navbar CSS -->
<link
rel="stylesheet"
href="https://cdn.minionsenterprises.com/styles/main.css"
/>

<!-- Navbar Script -->
<script
src="https://cdn.minionsenterprises.com/scripts/main.js">
</script>

Full Example

<!-- Navbar CSS -->
<link
rel="stylesheet"
href="https://cdn.minionsenterprises.com/styles/main.css"
/>

<!-- Navbar Component -->
<company-navbar></company-navbar>

<!-- Navbar Config -->
<script>
window.CompanyNavbarConfig = {

  companyName: "MyApp",

  subheading: "Enterprise Solutions",

  theme: "dark",

  maxVisibleItems: 4,

  leftComponents: [

    `
    <span style="
      color:white;
      font-weight:bold;
    ">
      PRO
    </span>
    `
  ],

  rightComponents: [

    `
    <button style="
      background:#3b82f6;
      color:white;
      border:none;
      padding:10px 16px;
      border-radius:8px;
    ">
      Dashboard
    </button>
    `
  ],

  links: [
    {
      label: "Home",
      href: "#",
      icon: "fas fa-home"
    }
  ]
};
</script>

<!-- Navbar Script -->
<script
src="https://cdn.minionsenterprises.com/scripts/main.js">
</script>

Configuration Options

Option	Description
companyName	Main company title
subheading	Small subtitle text
logo	Brand logo URL
theme	Navbar color theme
links	Navigation links array
maxVisibleItems	Maximum visible links before overflow menu
leftComponents	Array of custom HTML components displayed on the left side
rightComponents	Array of custom HTML components displayed on the right side

Custom Components

The navbar supports fully custom HTML components on both the left and right sides.

You can pass:

Buttons
Div elements
Span tags
Profile avatars
Notifications
Search bars
Login buttons
Badges

Left Components

leftComponents: [

  `
  <div class="custom-badge">
    Enterprise
  </div>
  `,

  `
  <span style="
    color:white;
    font-weight:600;
  ">
    Beta Version
  </span>
  `
]

Right Components

rightComponents: [

  `
  <button style="
    background:#3b82f6;
    border:none;
    color:white;
    padding:10px 18px;
    border-radius:10px;
    cursor:pointer;
  ">
    Login
  </button>
  `,

  `
  <div style="
    width:36px;
    height:36px;
    border-radius:50%;
    background:#10b981;
  "></div>
  `
]