Nuxt•2w ago

NuxtUI HorizontalNavigation

Hi, I'm new to Nuxt and want to make a simple web app that stores and displays my school grades. I have chosen NuxtUI for UI components and started straight ahead with the header. Currently my code looks like this:

<script setup lang="ts">
const route = useRoute();

const links = [
  {
    label: "Home",
    icon: "i-heroicons-home",
    to: "/",
  },
  {
    label: "Grades",
    icon: "i-heroicons-academic-cap",
    to: "/grades",
  },
  {
    label: "Subjects",
    icon: "i-heroicons-book-open",
    to: "/subjects",
  },
  {
    label: "Settings",
    icon: "i-heroicons-adjustments-horizontal",
    to: "/settings",
  },
];
</script>

<template>
  <header class="flex items-center justify-space-between">
    <div class="flex items-center space-x-2">
      <UIcon name="i-heroicons-academic-cap"></UIcon>
      <h1 class="text-3xl font-bold">Grade Tracker</h1>
    </div>
    <UHorizontalNavigation
      :links="links"
      class="border-b border-gray-200 dark:border-gray-800"
    ></UHorizontalNavigation>
    <UIcon name="i-heroicons-moon"></UIcon>
  </header>
</template>

<script setup lang="ts">
const route = useRoute();

const links = [
  {
    label: "Home",
    icon: "i-heroicons-home",
    to: "/",
  },
  {
    label: "Grades",
    icon: "i-heroicons-academic-cap",
    to: "/grades",
  },
  {
    label: "Subjects",
    icon: "i-heroicons-book-open",
    to: "/subjects",
  },
  {
    label: "Settings",
    icon: "i-heroicons-adjustments-horizontal",
    to: "/settings",
  },
];
</script>

<template>
  <header class="flex items-center justify-space-between">
    <div class="flex items-center space-x-2">
      <UIcon name="i-heroicons-academic-cap"></UIcon>
      <h1 class="text-3xl font-bold">Grade Tracker</h1>
    </div>
    <UHorizontalNavigation
      :links="links"
      class="border-b border-gray-200 dark:border-gray-800"
    ></UHorizontalNavigation>
    <UIcon name="i-heroicons-moon"></UIcon>
  </header>
</template>

My problem is, that the HorizontalNavigation component has an extrem large margin on the right. I have tried to put the logo/title and the moon icon for dark/light theme in the Navigation Component, but I don't think this is the right way. I have attached an image of how i want the site to look like (made in figma). Can anybody help me with that?

5 Replies

kapa.ai•2w ago

Hi @StormOfGalaxy. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources and your question, I can help you with adjusting the NuxtUI HorizontalNavigation component to achieve the layout you're looking for. Here's how you can modify your code to get closer to your desired result: 1. First, let's adjust the structure of your header to use the UHeader component from Nuxt UI Pro, which provides a more flexible layout:

<template>
  <UHeader :links="links">
    <template #logo>
      <div class="flex items-center space-x-2">
        <UIcon name="i-heroicons-academic-cap" />
        <h1 class="text-3xl font-bold">Grade Tracker</h1>
      </div>
    </template>

    <template #right>
      <UColorModeButton />
    </template>
  </UHeader>
</template>

<template>
  <UHeader :links="links">
    <template #logo>
      <div class="flex items-center space-x-2">
        <UIcon name="i-heroicons-academic-cap" />
        <h1 class="text-3xl font-bold">Grade Tracker</h1>
      </div>
    </template>

    <template #right>
      <UColorModeButton />
    </template>
  </UHeader>
</template>

2. In your script section, keep your links array as is. 3. The UHeader component will automatically handle the responsive layout and positioning of the navigation links, logo, and right-side elements. 4. To remove the extra margin on the right of the HorizontalNavigation component, you can customize its appearance using the ui prop. Add this to your UHeader component:

<UHeader
  :links="links"
  :ui="{
    wrapper: 'relative w-full flex items-center justify-between',
    container: 'flex items-center justify-between flex-1',
    base: 'group relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium text-sm',
    padding: 'px-2.5 py-1.5',
  }"
>
  <!-- ... rest of the code ... -->
</UHeader>

<UHeader
  :links="links"
  :ui="{
    wrapper: 'relative w-full flex items-center justify-between',
    container: 'flex items-center justify-between flex-1',
    base: 'group relative flex items-center gap-1.5 px-2.5 py-1.5 rounded-md font-medium text-sm',
    padding: 'px-2.5 py-1.5',
  }"
>
  <!-- ... rest of the code ... -->
</UHeader>

This customization will adjust the layout and spacing of the navigation items to be more compact and centered. 5. For the dark/light theme toggle, we're using the UColorModeButton component, which is part of Nuxt UI and provides a built-in functionality for switching between light and dark modes. These changes should help you achieve a layout closer to your Figma design. The UHeader component from Nuxt UI Pro is designed to be responsive and will automatically adjust for mobile views. Remember that you'll need to have Nuxt UI Pro installed and configured in your project to use the UHeader component. If you're using the standard Nuxt UI, you might need to create a custom header component to achieve the exact layout you want. For more detailed customization options, you can refer to the Header documentation and HorizontalNavigation documentation. If you need further adjustments or have any questions about implementing this in your Nuxt application, please feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@835766998008594434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

StormOfGalaxyOP•2w ago

@kapa.ai How could achieve this without the UHeader component?

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To achieve a similar layout without using the UHeader component from Nuxt UI Pro, you can create a custom header using standard HTML and Nuxt UI components. Here's how you can modify your existing code to get closer to your desired layout:

<script setup lang="ts">
const links = [
  {
    label: "Home",
    icon: "i-heroicons-home",
    to: "/",
  },
  {
    label: "Grades",
    icon: "i-heroicons-academic-cap",
    to: "/grades",
  },
  {
    label: "Subjects",
    icon: "i-heroicons-book-open",
    to: "/subjects",
  },
  {
    label: "Settings",
    icon: "i-heroicons-adjustments-horizontal",
    to: "/settings",
  },
];
</script>

<template>
  <header class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-800">
    <div class="flex items-center space-x-2">
      <UIcon name="i-heroicons-academic-cap" class="w-6 h-6" />
      <h1 class="text-xl font-bold">Grade Tracker</h1>
    </div>
    
    <UHorizontalNavigation
      :links="links"
      :ui="{
        wrapper: 'flex-1 flex justify-center',
        base: 'px-3 py-2',
        active: 'text-primary-500 dark:text-primary-400',
        inactive: 'text-gray-700 dark:text-gray-300'
      }"
    />
    
    <UColorModeButton />
  </header>
</template>

<script setup lang="ts">
const links = [
  {
    label: "Home",
    icon: "i-heroicons-home",
    to: "/",
  },
  {
    label: "Grades",
    icon: "i-heroicons-academic-cap",
    to: "/grades",
  },
  {
    label: "Subjects",
    icon: "i-heroicons-book-open",
    to: "/subjects",
  },
  {
    label: "Settings",
    icon: "i-heroicons-adjustments-horizontal",
    to: "/settings",
  },
];
</script>

<template>
  <header class="flex items-center justify-between px-4 py-2 border-b border-gray-200 dark:border-gray-800">
    <div class="flex items-center space-x-2">
      <UIcon name="i-heroicons-academic-cap" class="w-6 h-6" />
      <h1 class="text-xl font-bold">Grade Tracker</h1>
    </div>
    
    <UHorizontalNavigation
      :links="links"
      :ui="{
        wrapper: 'flex-1 flex justify-center',
        base: 'px-3 py-2',
        active: 'text-primary-500 dark:text-primary-400',
        inactive: 'text-gray-700 dark:text-gray-300'
      }"
    />
    
    <UColorModeButton />
  </header>
</template>

Let's break down the changes: 1. We've kept the header as a flex container with justify-between to space out the logo, navigation, and color mode button. 2. The UHorizontalNavigation component is now placed directly in the header. We've customized its appearance using the ui prop, as described in the HorizontalNavigation documentation: - wrapper: 'flex-1 flex justify-center' makes the navigation take up the available space and centers its content. - base: 'px-3 py-2' adjusts the padding of each navigation item. - active and inactive classes customize the appearance of active and inactive links. 3. We're still using the UColorModeButton for the dark/light theme toggle, as it provides built-in functionality for switching between modes. 4. The layout uses flexbox to achieve the desired positioning without relying on the UHeader component. This approach should give you a header layout similar to what you're aiming for, with the logo on the left, centered navigation, and the color mode toggle on the right. You may need to fine-tune the spacing and sizes to match your exact design. Remember that this solution might require additional work to make it fully responsive for mobile views. You might want to consider adding a mobile menu for smaller screens, which could be implemented using other Nuxt UI components like UButton and UDropdown. If you need any further adjustments or have questions about implementing this in your Nuxt application, please feel free to ask! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@835766998008594434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

NuxtUI HorizontalNavigation

Did you find this page helpful?