Navbar is a fixed area at the top of a screen that contains Page title and navigation elements.
There are following components included:
Navbar
NavbarBackLink
Name | Type | Default | Description |
---|---|---|---|
bgClass | string | Additional class to add on Navbar's "background" element | |
centerTitle | boolean | undefined | Makes centered navbar title. If not specified then it set it to center in iOS theme |
colors | object | Object with Tailwind CSS colors classes | |
colors.bgIos | string | 'bg-ios-light-surface-2 dark:bg-ios-dark-surface-2' | |
colors.bgMaterial | string | 'bg-md-light-surface-2 dark:bg-md-dark-surface-2' | |
colors.textIos | string | 'text-black dark:text-white' | |
colors.textMaterial | string | 'text-md-light-on-surface dark:text-md-dark-on-surface' | |
fontSizeIos | string | 'text-[17px]' | Tailwind CSS class for font size in iOS theme |
fontSizeMaterial | string | 'text-[16px]' | Tailwind CSS class for font size in Material theme |
innerClass | string | Additional class to add on Navbar's "inner" element | |
large | boolean | false | Renders large-sized navbar with extra row for large-sized title which becomes usual size on scroll |
left | string | Content of the Navbar's "left" area | |
leftClass | string | Additional class to add on Navbar's "left" element | |
medium | boolean | false | Renders medium-sized navbar with extra row for medium-sized title which becomes usual size on scroll |
outline | boolean | undefined | Renders outer hairlines (borders). If not specified, will be enabled for iOS theme |
right | string | Content of the Navbar's "right" area | |
rightClass | string | Additional class to add on Navbar's "right" element | |
scrollEl | any | undefined | Element required for correct "collapse" functionality for medium/large/transparent Navbar. If not specified, it will use Navbar's parent element |
subnavbar | string | Content of the Navbar's "subnavbar" area | |
subnavbarClass | string | Additional class to add on Navbar's "subnavbar" element | |
subtitle | string | Content of the Navbar's "subtitle" area | |
subtitleClass | string | Additional class to add on Navbar's "subtitle" element | |
title | string | Content of the Navbar's "title" area | |
titleClass | string | Additional class to add on Navbar's "title" element | |
titleFontSizeIos | string | 'text-[17px]' | Tailwind CSS class for navbar title font size in iOS theme |
titleFontSizeMaterial | string | 'text-[22px]' | Tailwind CSS class for navbar title font size in Material theme |
titleLargeFontSizeIos | string | 'text-[34px]' | Tailwind CSS class for large-sized navbar title font size in iOS theme |
titleLargeFontSizeMaterial | string | 'text-[28px]' | Tailwind CSS class for large-sized navbar title font size in Material theme |
titleMediumFontSizeIos | string | 'text-[24px]' | Tailwind CSS class for medium-sized navbar title font size in iOS theme |
titleMediumFontSizeMaterial | string | 'text-[24px]' | Tailwind CSS class for medium-sized navbar title font size in Material theme |
translucent | boolean | true | Makes Navbar background translucent (with |
transparent | boolean | false | Renders transparent navbar which becomes opaque on scroll |
Name | Description |
---|---|
left | Content of the Navbar's "left" area |
right | Content of the Navbar's "right" area |
subnavbar | Content of the Navbar's "subnavbar" area |
subtitle | Content of the Navbar's "subtitle" area |
title | Content of the Navbar's "title" area |
NavbarBackLink
should be placed in Navbar's "left" area:
<Navbar title="My App">
<NavbarBackLink slot="left" text="Back" onClick={() => history.back()} />
</Navbar>
Name | Type | Default | Description |
---|---|---|---|
component | string | 'a' | Component's HTML Element |
showText | boolean | 'auto' | 'auto' | Defines whether to show the link text. When 'auto', it hides link text for Material theme |
text | string | 'Back' | Text content of the back link |
onClick | function(e) | Link click handler | |
onClick | function(e) |
|
Name | Description |
---|---|
text | Text content of the back link |
<script>import {Page,Navbar,NavbarBackLink,Link,Block,BlockHeader,BlockTitle,Radio,Toggle,List,ListItem,} from 'konsta/svelte';let size = 'Default';let isTransparent = false;</script><Page><Navbartitle="Navbar"subtitle="Subtitle"class="top-0 sticky"medium={size === 'Medium'}large={size === 'Large'}transparent={isTransparent}><Link slot="right" navbar>Right</Link></Navbar><div class="relative"><Block strong inset><p>Navbar is a fixed area at the top of a screen that contains Page titleand navigation elements.</p></Block><BlockTitle>Size</BlockTitle><BlockHeader>Medium and Large will collapse to usual size on page scroll</BlockHeader><List strong inset>{#each ['Default', 'Medium', 'Large'] as v}<ListItem key={v} label title={v}><Radioslot="after"component="div"value={v}checked={size === v}onChange={() => (size = v)}/></ListItem>{/each}</List><BlockTitle>Transparent</BlockTitle><BlockHeader>When navbar is transparent, its title and background will become visibleon page scroll</BlockHeader><List strong inset><ListItem label title="Transparent"><Toggleslot="after"component="div"checked={isTransparent === true}onChange={() => (isTransparent = !isTransparent)}/></ListItem></List><Block strong inset className="space-y-4"><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto temporeratione unde accusantium distinctio nulla quia numquam earum odio,optio, nisi rem deserunt. Molestiae delectus, ut assumenda numquam magnienim.</p><p>Architecto molestias cum dolor dolorem provident consequuntur inciduntsunt fugiat tenetur odio, recusandae placeat rem veniam. Voluptates,repellendus odit, magni nesciunt, optio laborum asperiores repudiandaeconsectetur suscipit ab cupiditate eum.</p><p>Aliquam, iste accusamus deleniti temporibus exercitationem nequeperferendis optio, blanditiis quisquam molestias perspiciatis cumqueharum tenetur veniam. Dolorum fugit doloribus est, deserunt, eligendi,quaerat quidem itaque tempore laborum non illum?</p><p>Rerum magni sunt quis veniam, dolor ratione saepe ducimus temporevoluptatum porro quod commodi? Aperiam laudantium deleniti totam dolorumqui accusantium iste saepe facere optio, soluta maxime mollitia deseruntcumque.</p><p>Iusto tempore quis provident, saepe illum ex ipsum cupiditate explicaboratione unde facere nemo delectus harum, blanditiis eius sit asperioresnam. Aut cupiditate est tempore officia, perspiciatis esse asperioresrepudiandae?</p><p>Consequuntur itaque harum eos vero, reiciendis dolorum iure non earummolestias tenetur sint enim, maxime recusandae ad perferendisrepudiandae! Sit, quos exercitationem beatae numquam laborum nobisnatus. Obcaecati, ea inventore.</p><p>Fugit culpa labore sapiente excepturi reiciendis, nulla, nihil neque utveritatis quis quibusdam dolorum? Voluptatibus animi officiaperspiciatis doloremque cum voluptatem, quia ratione modi vero,consequatur ipsum, praesentium quibusdam amet?</p><p>Laudantium nihil sint nam placeat, nemo rerum ipsam explicabo iustodolores molestiae expedita eos consequuntur ut architecto consequatursoluta ad maiores voluptatem tenetur in velit. Minima quia molestiaenobis voluptatibus.</p><p>Expedita soluta quia inventore et placeat id exercitationem quisquameligendi est eius sapiente quo, cum nesciunt mollitia, sit veniamducimus tempora culpa adipisci commodi in autem nihil voluptatemcorporis? Perspiciatis.</p><p>Molestias, est? Eligendi vero distinctio voluptatem cumque idvoluptatibus, officia minima repellendus sit illo tempora laboreprovident? Eum tenetur consectetur quae, in facilis autem ipsamdoloribus voluptate vitae suscipit nobis.</p><p>Obcaecati optio iste hic, soluta minus ullam, perferendis pariatur nonpossimus autem nostrum libero sapiente. Corporis quo cum iustoexercitationem velit. Non beatae eveniet asperiores ipsa consequunturtemporibus sapiente earum!</p><p>Temporibus, omnis. Excepturi dolorum expedita laudantium quasi quod idadipisci, esse, nam atque in, incidunt ex ab distinctio repellendusbeatae voluptatem alias odit illum quis. Illo numquam voluptatibus errorvoluptatum!</p></Block></div></Page>
<script>import {Page,Navbar,NavbarBackLink,Block,Segmented,SegmentedButton,} from 'konsta/svelte';</script><Page><Navbar title="Subnavbar"><Segmentedslot="subnavbar"strongactiveButtonIndex={0}childButtonsLength={3}><SegmentedButton small strong active>Button</SegmentedButton><SegmentedButton small strong>Button</SegmentedButton><SegmentedButton small strong>Button</SegmentedButton></Segmented></Navbar><div class="relative"><Block strongIos outlineIos><p>Subnavbar is useful when you need to put any additional elements intoNavbar, like Tab Links or Search Bar. It also remains visible whenNavbar hidden.</p></Block></div></Page>