Wrappers - butchr

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.

Copyright

You can update copyright content by updating resources/js/Components/Copyright.vue.

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.

Simple links

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.

Internal link

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",
  },
];

Link to section

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.

Open link in new tab

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 is generated with shadcn-vue Navigation Menu.

External links

…

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…

Get Started

Modules

Components

Authentication

Payments

Other Features

Deployment

​Section wrapper

​HTML tag

​Paddings

​Class

​Example

​Container

​Layout

​Background

​Gaps

​Class

​Example

​Application header

​Sticky

​Style

​Background color

​Shadow

​Application footer

​Copyright

​Default layout

​Centered layout

​Other layouts

​Navbar

​Main menu

​Simple links

​Internal link

​Link to section

​Open link in new tab

​scrollTo function

​Mega menu

​External links

​Trigger menu

​Active state

​Example

Section wrapper

HTML tag

Paddings

Class

Example

Container

Layout

Background

Gaps

Class

Example

Application header

Sticky

Style

Background color

Shadow

Application footer

Copyright

Default layout

Centered layout

Other layouts

Navbar

Main menu

Simple links

Internal link

Link to section

Open link in new tab

scrollTo function

Mega menu

External links

Trigger menu

Active state

Example