Skip to content

feat (Navbar): add Navbar.center, shadow prop, hideOnScroll Prop, etc. #658

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
paanSinghCoder merged 24 commits into from
Mar 20, 2026
Merged

feat (Navbar): add Navbar.center, shadow prop, hideOnScroll Prop, etc. #658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
7443d0f
feat: add center and add shadow prop
paanSinghCoder Feb 26, 2026
7809f71
feat: add hideOnScroll, flex props
paanSinghCoder Feb 27, 2026
8fa1c84
docs: update Navbar documentation to include Flex props and new hideO…
paanSinghCoder Feb 27, 2026
df4e7bd
refactor: remove outdated comment from NavbarRootProps interface
paanSinghCoder Feb 27, 2026
ef62db5
refactor: update Navbar demo sections for clarity and consistency
paanSinghCoder Feb 27, 2026
4f02ce1
feat: enhance DemoPreview component with customizable preview class
paanSinghCoder Feb 27, 2026
8e799ae
feat: enhance Navbar demo with shadow prop and updated styles
paanSinghCoder Feb 27, 2026
33859b9
feat: add hideOnScroll demo to Navbar documentation
paanSinghCoder Feb 27, 2026
7500a58
docs: clarify navbar hideOnScroll behavior in documentation
paanSinghCoder Feb 27, 2026
2602aca
chore: add Navbar into examples page
paanSinghCoder Feb 27, 2026
dcafa37
feat: refactor Navbar layout to use grid system and absolute center t…
paanSinghCoder Feb 27, 2026
64381d7
feat: enhance NavbarRoot component with scroll behavior improvements
paanSinghCoder Feb 27, 2026
403121c
Merge branch 'main' into feat/navbar-improvements-center
paanSinghCoder Mar 18, 2026
75cbe6b
chore: remove global class
paanSinghCoder Mar 18, 2026
17a21a2
docs: styling
paanSinghCoder Mar 18, 2026
2b1be28
refactor: simplify scroll detection code
paanSinghCoder Mar 18, 2026
155212d
feat: add scrollContainerRef prop
paanSinghCoder Mar 18, 2026
70be60b
refactor: add base-ui/utils pkg and use for merging refs
paanSinghCoder Mar 18, 2026
99b5348
refactor: remove state for tracking hidden/visible
paanSinghCoder Mar 18, 2026
e57a5c2
chore: remove shadow prop
paanSinghCoder Mar 18, 2026
dc12514
Merge branch 'main' into feat/navbar-improvements-center
paanSinghCoder Mar 20, 2026
40dfe1e
chore: remove conditional group
paanSinghCoder Mar 20, 2026
929ed3a
chore: remove unused class names
paanSinghCoder Mar 20, 2026
8872390
Merge branch 'main' into feat/navbar-improvements-center
paanSinghCoder Mar 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4,741 changes: 2,357 additions & 2,384 deletions apps/www/src/app/examples/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 0 additions & 16 deletions apps/www/src/components/demo/demo-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,19 +71,3 @@ export default function DemoPreview({
</LiveProvider>
);
}
{
/* // {Array.isArray(codePreview) ? ( */
}
// <Tabs
// items={codePreview.map(tab => tab.label)}
// className={styles.codeTabGroup}
// >
// {codePreview.map(tab => (
// <Tab className={styles.codeTab} value={tab.label} key={tab.label}>
// <Editor code={tab.code} />
// </Tab>
// ))}
// </Tabs>
// ) : (
// <Editor code={previewCode} />
// )}
23 changes: 15 additions & 8 deletions apps/www/src/components/demo/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,14 +24,10 @@
border-bottom: 0.5px solid var(--rs-color-border-base-primary);
}

.previewReset {
position: absolute;
bottom: 8px;
right: 8px;
padding: var(--rs-space-1, 2px);
width: var(--rs-space-5, 16px);
height: var(--rs-space-5, 16px);
border-radius: var(--rs-radius-1, 2px);
.preview:has(:global(.navbar-demo-wrapper)) {
align-items: flex-start;
justify-content: flex-start;
min-height: unset;
}

.form {
Expand All @@ -48,6 +44,7 @@
flex-shrink: 0;
max-height: 400px;
}

.noShadow {
box-shadow: none;
}
Expand Down Expand Up @@ -148,13 +145,15 @@
.previewContainer {
flex-direction: column;
}

.form {
width: 100%;
max-height: 280px;
border-top: 0.5px solid var(--rs-color-border-base-primary);
border-left: none;
}
}

.playgroundDialog {
height: 88vh;
width: 72%;
Expand All @@ -165,39 +164,47 @@
display: flex;
flex-direction: column;
}

.playgroundHeader {
border: 0.5px solid var(--rs-color-border-base-primary);
background: var(--rs-color-background-base-secondary);
height: 32px;
padding: 0 var(--rs-space-5);
}

.playgroundTitle {
font-size: var(--rs-font-size-small);
font-weight: var(--rs-font-weight-medium);
line-height: var(--rs-line-height-small);
letter-spacing: var(--rs-letter-spacing-small);
}

.playgroundContent {
flex: 1;
border-radius: 0;
border: none;
}

.playgroundPreviewContainer {
flex: 2;
}

.playgroundPreview {
border-bottom: none;
padding-bottom: 1px;
}

.playgroundControls {
border-bottom: none;
max-height: none;
}

.playgroundEditor {
flex: 1;
border-top: 0.5px solid var(--rs-color-border-base-primary);
overflow: auto;
}

.playgroundPreviewContent {
padding: var(--rs-space-12);
align-items: safe center;
Expand Down
6 changes: 6 additions & 0 deletions apps/www/src/content/docs/components/navbar/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.navbar-demo-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
}
209 changes: 133 additions & 76 deletions apps/www/src/content/docs/components/navbar/demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,23 @@
export const preview = {
type: 'code',
code: `
<Navbar>
<Navbar.Start>
<Text size="regular" weight="medium">Explore</Text>
</Navbar.Start>
<Navbar.End>
<Search placeholder="Search an AOI" size="small" style={{ width: '200px' }} />
<Button variant="outline" size="small" color="neutral" leadingIcon={<PlusIcon />}>
Draw AOI
</Button>
<Button variant="outline" size="small" color="neutral" leadingIcon={<UploadIcon />}>
Upload AOI
</Button>
</Navbar.End>
</Navbar>`
<div className="navbar-demo-wrapper">
<Navbar>
<Navbar.Start>
<Text size="regular" weight="medium">Explore</Text>
</Navbar.Start>
<Navbar.End>
<Search placeholder="Search an AOI" size="small" style={{ width: '200px' }} />
<Button variant="outline" size="small" color="neutral" leadingIcon={<PlusIcon />}>
Draw AOI
</Button>
<Button variant="outline" size="small" color="neutral" leadingIcon={<UploadIcon />}>
Upload AOI
</Button>
</Navbar.End>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
};

export const stickyDemo = {
Expand All @@ -25,68 +28,115 @@ export const stickyDemo = {
{
name: 'Default',
code: `
<Navbar>
<Navbar.Start>
<Text size="regular" weight="medium">Navigation</Text>
</Navbar.Start>
<Navbar.End>
<Button variant="ghost" size="small">Home</Button>
<Button variant="ghost" size="small">About</Button>
<Button variant="ghost" size="small">Contact</Button>
</Navbar.End>
</Navbar>`
<div className="navbar-demo-wrapper">
<Navbar>
<Navbar.Start>
<Text size="regular" weight="medium">Navigation</Text>
</Navbar.Start>
<Navbar.End>
<Button variant="ghost" size="small">Home</Button>
<Button variant="ghost" size="small">About</Button>
<Button variant="ghost" size="small">Contact</Button>
</Navbar.End>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
},
{
name: 'Sticky',
code: `
<Navbar sticky>
<Navbar.Start>
<Text size="regular" weight="medium">Navigation</Text>
</Navbar.Start>
<Navbar.End>
<Button variant="ghost" size="small">Home</Button>
<Button variant="ghost" size="small">About</Button>
<Button variant="ghost" size="small">Contact</Button>
</Navbar.End>
</Navbar>`
<div className="navbar-demo-wrapper navbar-sticky-demo-scroll" style={{ width: '100%', alignSelf: 'stretch', overflow: 'auto', height: 300 }}>
<Navbar sticky>
<Navbar.Start>
<Text size="regular" weight="medium">Navigation</Text>
</Navbar.Start>
<Navbar.End>
<Button variant="ghost" size="small">Home</Button>
<Button variant="ghost" size="small">About</Button>
<Button variant="ghost" size="small">Contact</Button>
</Navbar.End>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 400, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
}
]
};

export const hideOnScrollDemo = {
type: 'code',
code: `
<div className="navbar-demo-wrapper navbar-sticky-demo-scroll" style={{ width: '100%', alignSelf: 'stretch', overflow: 'auto', height: 300 }}>
<Navbar sticky hideOnScroll>
<Navbar.Start>
<Text size="regular" weight="medium">Navigation</Text>
</Navbar.Start>
<Navbar.End>
<Button variant="ghost" size="small">Home</Button>
<Button variant="ghost" size="small">About</Button>
<Button variant="ghost" size="small">Contact</Button>
</Navbar.End>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 400, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
};

export const sectionsDemo = {
type: 'code',
tabs: [
{
name: 'Start Only',
name: 'Start',
code: `
<Navbar>
<Navbar.Start>
<Text size="regular" weight="medium">Brand Name</Text>
</Navbar.Start>
</Navbar>`
<div className="navbar-demo-wrapper">
<Navbar>
<Navbar.Start>
<Text size="regular" weight="medium">Brand Name</Text>
</Navbar.Start>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
},
{
name: 'End Only',
name: 'Center',
code: `
<Navbar>
<Navbar.End>
<Button variant="outline" size="small">Login</Button>
<Button size="small">Sign Up</Button>
</Navbar.End>
</Navbar>`
<div className="navbar-demo-wrapper">
<Navbar>
<Navbar.Center>
<Text size="regular" weight="medium">Centered Title</Text>
</Navbar.Center>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
},
{
name: 'Both Sections',
name: 'End',
code: `
<Navbar>
<Navbar.Start>
<Text size="regular" weight="medium">Explore</Text>
</Navbar.Start>
<Navbar.End>
<Search placeholder="Search..." size="small" style={{ width: '200px' }} />
<Button variant="outline" size="small">Action</Button>
</Navbar.End>
</Navbar>`
<div className="navbar-demo-wrapper">
<Navbar>
<Navbar.End>
<Button variant="outline" size="small">Login</Button>
<Button size="small">Sign Up</Button>
</Navbar.End>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
},
{
name: 'Start, Center and End',
code: `
<div className="navbar-demo-wrapper">
<Navbar>
<Navbar.Start>
<Text size="regular" weight="medium">Explore</Text>
</Navbar.Start>
<Navbar.Center>
<Text size="regular" weight="medium">Brand</Text>
</Navbar.Center>
<Navbar.End>
<Button variant="outline" size="small">Action</Button>
</Navbar.End>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
}
]
};
Expand All @@ -97,19 +147,22 @@ export const accessibilityDemo = {
{
name: 'Custom aria-label',
code: `
<Navbar aria-label="Primary navigation">
<Navbar.Start>
<Text size="regular" weight="medium">Brand</Text>
</Navbar.Start>
<Navbar.End>
<Button size="small">Menu</Button>
</Navbar.End>
</Navbar>`
<div className="navbar-demo-wrapper">
<Navbar aria-label="Primary navigation">
<Navbar.Start>
<Text size="regular" weight="medium">Brand</Text>
</Navbar.Start>
<Navbar.End>
<Button size="small">Menu</Button>
</Navbar.End>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
},
{
name: 'With aria-labelledby',
code: `
<>
<div className="navbar-demo-wrapper">
<Navbar aria-labelledby="nav-heading">
<Navbar.Start>
<Text size="regular" weight="medium">Brand</Text>
Expand All @@ -118,20 +171,24 @@ export const accessibilityDemo = {
<Button size="small">Menu</Button>
</Navbar.End>
</Navbar>
</>`
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
},
{
name: 'Section Labels',
code: `
<Navbar>
<Navbar.Start aria-label="Brand and navigation links">
<Text size="regular" weight="medium">Brand</Text>
</Navbar.Start>
<Navbar.End aria-label="User actions and settings">
<Button size="small">Settings</Button>
<Button size="small">Profile</Button>
</Navbar.End>
</Navbar>`
<div className="navbar-demo-wrapper">
<Navbar>
<Navbar.Start aria-label="Brand and navigation links">
<Text size="regular" weight="medium">Brand</Text>
</Navbar.Start>
<Navbar.End aria-label="User actions and settings">
<Button size="small">Settings</Button>
<Button size="small">Profile</Button>
</Navbar.End>
</Navbar>
<div style={{ margin: 'var(--rs-space-8)', width: 'calc(100% - 2 * var(--rs-space-8))', minHeight: 200, border: '2px dashed var(--rs-color-border-base-secondary)', boxSizing: 'border-box' }} />
</div>`
}
]
};
Loading
Loading