Original menu header and footer separator textures.
Preview
Example source could not be loaded: separator-example. Reload this page to retry.Usage
Separator supports only horizontal orientation; vertical requests throw. edge="header" is the default, and edge="footer" selects the other original texture. Its width comes from your layout. Decorative separators use role="none" and aria-hidden by default; the example opts into named separator semantics.
Composition
Use the header texture before menu content and footer texture before actions. Standalone separators are decorative unless explicitly given semantic role and a name. Rotation is not a supported vertical Separator API.
Installation
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
import * as React from "react";
import { minecraftClasses as cn, minecraftStyle } from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";
import { minecraftSeparatorAssets } from "./minecraft-separator-assets";
import "./minecraft-separator.css";
interface SeparatorPaintStyle extends React.CSSProperties {Interactive playground
MENU HEADER
MENU FOOTER
Separate content and actions