​
Section wrapper

resources/js/Components/Sections/SectionWrapper.vue

​
HTML tag

tag?: "div" | "section" | "article" Defaults to section.

​
Paddings

withoutTopPadding?: boolean
withoutBottomPadding?: boolean Sections have predefined top and bottom padding to separate page sections by whitespace. Set any of those 2 props to true to remove top or bottom padding. This is useful when you want to remove the gap between sections with same background color.

​
Class

class?: HTMLAttributes["class"] Override paddings, set background color, etc.

​
Example

Docs coming soon…

​
Container

resources/js/Components/Sections/Container.vue Tailwind container. Use props to style the look of the component:

​
Layout

layout?: "default" | "full" | "boxed" Defaults to default. Use full layout when you want to use background without left and right padding. Use boxed layout when you want to use background with default left and right padding.

​
Background

background?: "none" | "primary" | "inverted" Defaults to none. Use primary to set background in primary color var(--primary). Use inverted to invert background according to current mode. For light mode, background will be dark, and for dark mode background will be light.

​
Gaps

withoutGaps?: boolean Container is flex with column direction and included vertical gutters between the elements. Set to false to remove default gutters.

​
Class

class?: HTMLAttributes["class"] Override display, gaps, set background color, etc.

​
Example

Docs coming soon…

​
Application header

resources/js/Components/AppHeader.vue Main header of the pages. Use props to style the look of the component:

​
Sticky

sticky?: boolean Defaults to true. Set to false if you don’t want sticky header.

​
Style

style?: "default" | "floating" Defaults to default. Use default to display header in full width with bottom border and no offsets. Use floating to display header with borders and slight offset from the edges.

​
Background color

bg?: "default" | "inverted" | "primary" | "transparent" Defaults to default. Use default to display header in background color defined by var(--background). Use inverted to display header in background color defined by var(--background), but using color from other theme.
If current theme is light, the dark theme background will be used.
If current theme is dark, the light theme background will be used. Use primary to display header in background color defined by var(--primary). Use transparent to display header in semi-transparent background color defined by var(--background).

​
Shadow

shadow?: boolean Defaults to true. Set to false to remove shadow from the header. Footers are used to include useful information at the bottom of each page, like a sitemap to help users navigate the site, links to social media, logo, name, tagline, copyright information, etc. You can update copyright content by updating resources/js/Components/Copyright.vue. By default content is © 2024.

​
Default layout

resources/js/Components/AppFooter.vue This layout will display info and links in grid (vertical on small devices, horizontal on large devices). Info section consists of logo, name, copyright and social media links. Links are grouped in 3 sections: Links, App and Legal. You can easily update the layout, change group names, add new groups, etc.

​
Centered layout

resources/js/Components/AppFooterV2.vue Content is centered and it consists of logo, important links, less important links (legal pages), social media links and copyright. Important links are display in 2 or 3 grid columns, depending on screen size.

​
Other layouts

More layouts come with v2.
All global navigation links are defined in resources/js/lib/navs.ts. Each navigation group should be typed with NavLink[]. resources/js/Components/MainMenu.vue Main menu component is included with AppHeader. You can use simple links in your navigation. Simple links are the links that can lead to another page, scroll to specific section or open external page. Links should be typed with NavLink defined in resources/js/types/index.d.ts.
  • title: Required. Title/label of the link.
  • link: Required. Set route name to link to internal pages or page URL.
  • section: Optional. Used when scrolling to section ID.
  • newTab: Optional. Set to true to open link in new tab.
  • active: Optional. Define the rule to check if current link is active.
  • icon: Optional. Icon component.
Links will lead to route('blog.index') and route('testimonials.index'). Also, links will be active when current page’s route name starts with blog. or when current page’s route name is testimonials.index. 
const navLinks: NavLink[] = [
  {
    title: trans("Blog"),
    link: "blog.index",
    active: "blog.*",
  },
  {
    title: trans("Testimonials"),
    link: "testimonials.index",
    active: "testimonials.index",
  },
];
Those links will scroll to the elements #pricing or #faq ID when on index page. Also, links will redirect to index page and jump to selected sections when not on index page. 
const navLinks: NavLink[] = [
  {
    title: trans("Pricing"),
    link: "index",
    section: "#pricing",
  },
  {
    title: trans("FAQ"),
    link: "index",
    section: "#faq",
  },
];
By default, scroll to section will be smooth and it will scroll to the center of the block. You can update those settings globally in resources/js/composable/useScrollTo.ts or per function call: 
<Button
  type="button"
  @click="
    scrollTo({
      target: '#section-id',
      routeName: 'index',
      options: { behavior: 'instant', block: 'start' },
    })
  "
>
  {{ $t('Scroll to section') }}
</Button>
When using start you can also control the scroll offset with scroll margin. This will open internal page in new tab. 
const navLinks: NavLink[] = [
  {
    title: trans("Blog"),
    link: route("blog.index"),
    newTab: true,
  },
];
This will open external page in new tab. 
const navLinks: NavLink[] = [
  {
    title: trans("Documentation"),
    link: "https://docs.butchr.dev",
    newTab: true,
  },
];

​
scrollTo function

scrollTo functions is used to direct user to the target section by scrolling (on same page) or redirect (on different page). When using Link or a elements you can pass an event to prevent default behavior. Function accepts 4 arguments:
  • event - You can pass an event to prevent default behavior for a element or Link component
  • target - element selector, ID is recommended
  • routeName - route name to handle redirects between pages, use in shared components likes navigation, footer, etc.
  • options - you can pass behavior and block for native scrollIntoView function
import { scrollTo } from "@/composable/useScrollTo";

<Link
  href="/#foo"
  @click="
    scrollTo({
      target: '#foo',
      routeName: 'index',
      event: $event,
    })
  "
>
  {{ $t("Click me") }}
</Link>

<button
  type="button"
  @click="scrollTo({
    target: '#foo',
    routeName: 'index',
    options: { behavior: 'instant', block: 'start' },
  })"
>
  {{ $t("Click me") }}
</button>

​
Mega menu

Mega menu is generated with shadcn-vue Navigation Menu. …

​
Trigger menu

To generate menu you should include those components: 
<NavigationMenuItem>
  <NavigationMenuTrigger :class="navMenuLinkClass">
    {{ $t("Features") }}
  </NavigationMenuTrigger>
  <NavigationMenuContent>
    <ul
      :class="cn(navMenuWrapperClass)"
      :style="getMenuContentStyle()"
    >
      <li v-for="item in features" :key="item.title">
        <NavigationMenuLink as-child>
          <NavigationMenuListItem :item="item" />
        </NavigationMenuLink>
      </li>
    </ul>
  </NavigationMenuContent>
</NavigationMenuItem>
navMenuLinkClass presents the set of predefined classes to style the menu triggers. navMenuWrapperClass presents the set of predefined classes to style the menu wrapper (defaults to 3 columns). You can customize those in resources/js/Components/MainMenu.vue. getMenuContentStyle is class to calculate dynamic width of the menu. It accepts 1 parameter cols (defaults to 3) which represents the number of columns you want to render in the menu. Go to MainMenu component to customize the sizes if required. You can trigger menu on hover or click (default). To trigger menu on hover instead, set the prop disable-hover-trigger to false on NavigationMenu component. For addtional customization, visit the offical (docs)[https://www.radix-vue.com/components/navigation-menu.html#root]

​
Active state

To define active state of main page links (the ones in navbar), set :data-active="route().current('blog.*') ? true : undefined" to the NavigationMenuLink component. By default, NavigationMenuLink renders a tag. To use the Inertia routing, you should define :as="Link" attribute. For external links, just add target="_blank" attribute. 
<NavigationMenuItem>
  <NavigationMenuLink
    :as="Link"
    :href="route('blog.index')"
    :data-active="route().current('blog.*') ? true : undefined"
  >
    {{ $t("Blog") }}
  </NavigationMenuLink>
</NavigationMenuItem>
route().current() is a helper function where you can determine current route by checking the exact route name (for example blog.index) or route name expressions (for example blog.* where all routes starting with blog. will return true). To style, go to resources/js/Components/ui/navigation-menu/index.ts and use data-[active]: class selector to customize the active states. To define active state of inner page links (the ones inside menus), define the active state rule. 
{
  title: "Wall of Trust",
  description: "See what our customers say",
  routeName: "testimonials.index",
  active: "testimonials.index",
  icon: HeartHandshakeIcon,
},
To style, go to resources/js/Components/NavigationMenuListItem.vue and update the class under route().current(item.active) condition.

​
Example

Docs coming soon…