diff --git a/apps/docs/docs/components/navbar/_brand.component.ts b/apps/docs/docs/components/navbar/_brand.component.ts
new file mode 100644
index 00000000..38aed7d0
--- /dev/null
+++ b/apps/docs/docs/components/navbar/_brand.component.ts
@@ -0,0 +1,26 @@
+import { NavbarComponent, NavbarContentComponent, NavbarItemComponent, NavbarBrandComponent } from 'flowbite-angular';
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'flowbite-demo-navbar-brand',
+ standalone: true,
+ imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent, NavbarBrandComponent],
+ template: `
+
+
+ Flowbite
+
+
+
+
+ Home
+
+
+ Contacts
+
+
+
+ `
+})
+export class FlowbiteBrandComponent {}
diff --git a/apps/docs/docs/components/navbar/_default.component.ts b/apps/docs/docs/components/navbar/_default.component.ts
index 66298823..1cd710d7 100644
--- a/apps/docs/docs/components/navbar/_default.component.ts
+++ b/apps/docs/docs/components/navbar/_default.component.ts
@@ -7,11 +7,11 @@ import { Component } from '@angular/core';
standalone: true,
imports: [NavbarComponent, NavbarItemComponent, NavbarContentComponent],
template: `
-
-
- Hello world !
-
-
+
+
+ Hello world!
+
+
`,
})
export class FlowbiteDefaultComponent {}
diff --git a/apps/docs/docs/components/navbar/_dropdown.component.ts b/apps/docs/docs/components/navbar/_dropdown.component.ts
new file mode 100644
index 00000000..cd847010
--- /dev/null
+++ b/apps/docs/docs/components/navbar/_dropdown.component.ts
@@ -0,0 +1,33 @@
+import { NavbarComponent, NavbarContentComponent, NavbarBrandComponent, NavbarItemComponent, DropdownComponent, DropdownItemComponent } from 'flowbite-angular';
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'flowbite-demo-navbar-dropdown',
+ standalone: true,
+ imports: [NavbarComponent, NavbarContentComponent, NavbarBrandComponent, NavbarItemComponent, DropdownComponent, DropdownItemComponent],
+ template: `
+
+
+ Flowbite
+
+
+
+ Hello world!
+
+
+
+ Profile
+
+
+ Billing
+
+
+ App settings
+
+
+
+
+ `
+})
+export class FlowbiteDropdownComponent {}
diff --git a/apps/docs/docs/components/navbar/_responsive.component.ts b/apps/docs/docs/components/navbar/_responsive.component.ts
new file mode 100644
index 00000000..bba44e78
--- /dev/null
+++ b/apps/docs/docs/components/navbar/_responsive.component.ts
@@ -0,0 +1,31 @@
+import { NavbarComponent, NavbarContentComponent, NavbarItemComponent, NavbarBrandComponent, NavbarToggleComponent } from 'flowbite-angular';
+
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'flowbite-demo-navbar-responsive',
+ standalone: true,
+ imports: [NavbarComponent, NavbarContentComponent, NavbarItemComponent, NavbarBrandComponent, NavbarToggleComponent],
+ template: `
+
+
+ Flowbite
+
+
+
+
+
+
+ Home
+
+
+ Pricing
+
+
+ Contacts
+
+
+
+ `
+})
+export class FlowbiteResponsiveComponent {}
diff --git a/apps/docs/docs/components/navbar/index.md b/apps/docs/docs/components/navbar/index.md
index 67ffec8a..04e4a099 100644
--- a/apps/docs/docs/components/navbar/index.md
+++ b/apps/docs/docs/components/navbar/index.md
@@ -13,3 +13,45 @@ keyword: NavbarPage
```typescript file="./_default.component.ts"#L1-L1 group="default" name="typescript"
```
+
+## Navbar with brand
+
+Use this example to display a brand element inside the navbar by importing the `NavbarBrandComponent` component.
+
+{{ NgDocActions.demo('flowbiteBrandComponent', {container: false}) }}
+
+```html file="./_brand.component.ts"#L10-L23 group="brand" name="html"
+
+```
+
+```typescript file="./_brand.component.ts"#L1-L1 group="brand" name="typescript"
+
+```
+
+## Navbar with dropdown
+
+Use this example to feature a dropdown menu when clicking on the settings dropdown inside the navbar by importing the `DropdownComponent` and `DropdownItemComponent` components.
+
+{{ NgDocActions.demo('flowbiteDropdownComponent', {container: false}) }}
+
+```html file="./_dropdown.component.ts"#L10-L30 group="dropdown" name="html"
+
+```
+
+```typescript file="./_dropdown.component.ts"#L1-L1 group="dropdown" name="typescript"
+
+```
+
+## Responsive navbar
+
+On mobile device the navigation bar will be collapsed and you will be able to use the hamburger menu to toggle the menu items by adding the `NavbarToggleComponent` component.
+
+{{ NgDocActions.demo('flowbiteResponsiveComponent', {container: false}) }}
+
+```html file="./_responsive.component.ts"#L10-L28 group="responsive" name="html"
+
+```
+
+```typescript file="./_responsive.component.ts"#L1-L1 group="responsive" name="typescript"
+
+```
diff --git a/apps/docs/docs/components/navbar/ng-doc.page.ts b/apps/docs/docs/components/navbar/ng-doc.page.ts
index 3db27fde..2ee8301a 100644
--- a/apps/docs/docs/components/navbar/ng-doc.page.ts
+++ b/apps/docs/docs/components/navbar/ng-doc.page.ts
@@ -1,5 +1,8 @@
import ComponentCategory from '../ng-doc.category';
import { FlowbiteDefaultComponent } from './_default.component';
+import { FlowbiteBrandComponent } from './_brand.component';
+import { FlowbiteDropdownComponent } from './_dropdown.component';
+import { FlowbiteResponsiveComponent } from './_responsive.component';
import type { NgDocPage } from '@ng-doc/core';
@@ -13,6 +16,9 @@ const navbar: NgDocPage = {
order: 10,
demos: {
flowbiteDefaultComponent: FlowbiteDefaultComponent,
+ flowbiteBrandComponent: FlowbiteBrandComponent,
+ flowbiteDropdownComponent: FlowbiteDropdownComponent,
+ flowbiteResponsiveComponent: FlowbiteResponsiveComponent,
},
};