ObjectUIComponentsLayout
Semantic
Semantic HTML5 elements for structured content (header, nav, main, aside, section, article, footer)
Semantic components provide HTML5 semantic elements that give meaning to the structure of web content, improving accessibility and SEO.
Available Elements
ObjectUI provides semantic wrappers for these HTML5 elements:
header- Page or section headernav- Navigation sectionmain- Main content areaaside- Sidebar or complementary contentsection- Thematic grouping of contentarticle- Self-contained contentfooter- Page or section footer
Basic Usage
Main Element
Header
Header
Navigation
Navigation
Section and Article
Section
Article
Aside and Footer
Aside
Footer
Schema
// All semantic elements share the same schema structure
interface SemanticSchema {
type: 'header' | 'nav' | 'main' | 'aside' | 'section' | 'article' | 'footer';
// Content
children?: SchemaNode | SchemaNode[]; // Child components
body?: SchemaNode[]; // Alternative content prop
// Styling
className?: string; // Tailwind CSS classes
// Base properties
id?: string;
visible?: boolean | string;
testId?: string;
}