Sidebar (Search)
App shellsMITSidebar shell with embedded search input above the nav links.
bun add @otfdashkit/ui
Preview
Sidebar (Search)App shells
Loading Storybook preview…
Code
@otfdashkit/uiimport { SidebarLayoutSearch } from '@otfdashkit/ui'
export function Example() {
return (
<SidebarLayoutSearch />
)
}
Free with the SDK. This block ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the SidebarLayoutSearch source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| brandName | string | 'Acme Inc' | |
| children | ReactNode | ||
| className | string | ||
| pageTitle | string | 'Dashboard' |
Questions
- What is the sidebar?
- The left column on this page: a brand line, a search field, and six built-in links (Dashboard, Analytics, Projects, Team, Notifications, Settings). The field filters those labels. Props are brandName, pageTitle, children, and className. The export is SidebarLayoutSearch from @otfdashkit/ui.
- What is sidebar?
- On this page the word means that navigation column, not a sidebar in the browser. This block is Sidebar (Search). The collapsible Sidebar, with groups, icons, and badges, is a separate page at /components/sidebar.
- Can this sidebar sit on the right?
- No. The aside is a fixed-width column on the left, with a border along its right edge. This block has no side prop.
- Define sidebar
- A sidebar is the navigation column beside the page. In this block that column holds the brand, the search input, and the links.
- What is a floating sidebar?
- A column that overlays the page. This block does not overlay and does not collapse. The aside stays in the row beside the main area.
- Where are sidebar examples?
- Other shells on this site: /components/sidebar, /components/sidebar-minimal, /components/sidebar-groups, /components/sidebar-with-user, and /components/sidebar-layout-dashboard. This page is /components/sidebar-with-search.