Navbar

A navigation bar component.

Examples

E-Commerce Navbar

A navbar for an e-commerce website.

ShopCart

Blog / Portfolio Navbar

A navbar for a blog or portfolio website.

School / Corporate Navbar

A navbar for a school or corporate website.

Code

<wdc-dropdown>
  <wdc-avatar-profile
    wdcDropdownTrigger
    name="Kamal Singh"
    email="kamal@wdcoders.com"
    status="online"
    size="default"
    shape="circle"
  ></wdc-avatar-profile>
   <wdc-dropdown-content class="w-56" align="end">
    <wdc-dropdown-label>My Account</wdc-dropdown-label>
    <wdc-dropdown-separator />
     <wdc-dropdown-item icon="person" shortcut="⇧⌘P"> Profile </wdc-dropdown-item>
    <wdc-dropdown-item icon="credit_card" shortcut="⌘B"> Billing </wdc-dropdown-item>
    <wdc-dropdown-item icon="settings" shortcut="⌘S"> Settings </wdc-dropdown-item>
     <wdc-dropdown-separator />
     <wdc-dropdown-item icon="logout" class="text-destructive focus:text-destructive">
      Log out
    </wdc-dropdown-item>
  </wdc-dropdown-content>
</wdc-dropdown>

<wdc-dropdown>
  <wdc-button wdcDropdownTrigger variant="ghost" size="icon" class="rounded-full">
    <wdc-icon name="more_vert" />
  </wdc-button>
   <wdc-dropdown-content align="end">
    <wdc-dropdown-item (click)="edit()"> Edit </wdc-dropdown-item>
    <wdc-dropdown-item (click)="duplicate()"> Duplicate </wdc-dropdown-item>
    <wdc-dropdown-separator />
    <wdc-dropdown-item (click)="delete()" class="text-red-600 hover:text-red-600">
      Delete
    </wdc-dropdown-item>
  </wdc-dropdown-content>
</wdc-dropdown>

API Reference

Input	Type	Default	Description
src	string	undefined	Image source URL.
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Size of the avatar.
shape	'circle' \| 'square'	'circle'	Shape of the avatar.
fallback	string	undefined	Fallback text to display when image is not available.
alt	string	undefined	Alternative text for the image.