Step 1: Editing Navigation Links

Locate the section for navigation links:

Desktop Links

Here’s the section for desktop navigation links:

<div className="ml-auto hidden lg:flex lg:items-center">
  <Link href="/components">Components</Link>
  <Link className="ml-8" href="/templates">
    Templates
  </Link>
  <Link className="ml-8" href="/templates/catalyst">
    UI Kit
  </Link>
  <Link className="ml-8" href="/documentation">
    Docs
  </Link>
</div>

• Edit Links: Update the href and link text.

• Add More Links: Add more <Link> components as needed.

Example:

<Link className="ml-8" href="/pricing">
  Pricing
</Link>
<Link className="ml-8" href="/blog">
  Blog
</Link>

Mobile Menu Links

Update the links in the mobile menu:

<div className="flex flex-col space-y-4 text-lg font-semibold">
  <Link href="/components" onClick={toggleMobileMenu}>
    Components
  </Link>
  <Link href="/templates" onClick={toggleMobileMenu}>
    Templates
  </Link>
  <Link href="/documentation" onClick={toggleMobileMenu}>
    Docs
  </Link>
</div>

• Ensure mobile links match the desktop links.

• Add or remove links as needed.

Step 2: Customizing the Announcement Bar

The announcement bar is an optional feature to promote updates or new features.

<a
  href="#announcementbar"
  className="group -my-2 ml-6 hidden items-center gap-2 rounded-full bg-white/25 px-3 py-2 text-xs text-slate-900 ring-1 ring-inset ring-black/[0.08] hover:bg-white/50 hover:ring-black/[0.13] sm:flex md:ml-8 lg:hidden min-[1300px]:flex"
>
  <svg className="h-4 w-4 fill-purple-500" viewBox="0 0 24 24">
    <path
      fillRule="evenodd"
      d="M9 4.5a.75.75 0 01.721.544l.813 2.846..."
      clipRule="evenodd"
    ></path>
  </svg>
  <span className="font-semibold">Introducing Espion</span>
  <span className="font-medium">
    <span>Our latest theme</span>
  </span>
</a>

How to Update:

1. Change the link: Update the href to point to your feature or announcement page.

2. Update text: Edit the text for the promotion.

Example:

<span className="font-semibold">Special Offer</span>
<span className="font-medium">Get 20% off all templates</span>

Step 3: Editing Buttons

There are two main buttons:

1. Sign-in Button (ButtonSignin component).

2. Get All-Access Button.

Update the Get All-Access Button

Locate the button:

<Link
  className="inline-flex justify-center rounded-full text-sm font-semibold py-2.5 px-4 bg-slate-900 text-white hover:bg-slate-700 -my-2.5 ml-8"
  href="/all-access"
>
  Get all-access <span aria-hidden="true">→</span>
</Link>

• Change link: Update href to your target page.

• Change text: Replace "Get all-access" with your desired text.

Step 4: Customizing the Mobile Menu

Open/Close Logic

The mobile menu opens and closes using this function:

const toggleMobileMenu = () => {
  setMobileMenuOpen(!isMobileMenuOpen);
};

• No changes are required here unless you want advanced logic.

Mobile Menu Animation

The menu uses Framer Motion for animations:

<motion.div
  initial={{ opacity: 0, y: -10 }}
  animate={{ opacity: 1, y: 0 }}
  exit={{ opacity: 0, y: -10 }}
  className="fixed inset-0 z-40 bg-white py-[2.125rem] lg:hidden..."
>
  {/* Menu Content */}
</motion.div>

• Adjust opacity or y values for different animation styles.

• Modify the duration for faster or slower animations.

Step 5: Updating the Logo

The logo is handled by the Logo component:

<Logo logoType="image" logoSrc="/UI Now Mark.svg" text="UI Now" showTextWithImage />

• Update the logoSrc: Replace /UI Now Mark.svg with your logo file path.

• Hide Text: Set showTextWithImage to false if you only want the logo image.

Example:

<Logo logoType="image" logoSrc="/your-logo.svg" text="My App" showTextWithImage={false} />

Step 6: Styling the Navigation

Tailwind Classes

The component uses Tailwind CSS for styling. Key areas to adjust:

• Background Color:

<header className="bg-white">

• Text Colors: Update text-slate-900 to other colors like text-gray-800 or text-neutral-700.

• Spacing: Change padding values like py-[2.125rem] or px-4.