UltraKit · Widget #21

Every style, layout and option of this widget — live on one page.

7 Nav Style5 Content Switch Animation4 Tab Layout4 Tabs Justify3 Icon Position3 Toggles
Section 01

7 options for nav style — all shown live below.

1
Style 1: Underline Accentnav_style = style-1

Showcase your product features here. Add icons, images, and compelling copy.

2
Style 2: Pill / Capsulenav_style = style-2

Showcase your product features here. Add icons, images, and compelling copy.

3
Style 3: Solid Background Fillnav_style = style-3

Showcase your product features here. Add icons, images, and compelling copy.

4
Style 4: Bordered Boxnav_style = style-4

Showcase your product features here. Add icons, images, and compelling copy.

5
Style 5: Gradient Activenav_style = style-5

Showcase your product features here. Add icons, images, and compelling copy.

6
Style 6: Minimal Ghostnav_style = style-6

Showcase your product features here. Add icons, images, and compelling copy.

7
Style 7: Dark / Nightnav_style = style-7

Showcase your product features here. Add icons, images, and compelling copy.

Section 02

5 options for content switch animation — all shown live below.

1
Fadecontent_anim = fade

Showcase your product features here. Add icons, images, and compelling copy.

2
Slide Upcontent_anim = slide-up

Showcase your product features here. Add icons, images, and compelling copy.

3
Slide In from Rightcontent_anim = slide-in

Showcase your product features here. Add icons, images, and compelling copy.

4
Zoom Incontent_anim = zoom

Showcase your product features here. Add icons, images, and compelling copy.

5
Nonecontent_anim = none

Showcase your product features here. Add icons, images, and compelling copy.

Section 03

4 options for tab layout — all shown live below.

1
Horizontal — Tabs on Toptab_layout = horizontal-top

Showcase your product features here. Add icons, images, and compelling copy.

2
Horizontal — Tabs on Bottomtab_layout = horizontal-bottom

Showcase your product features here. Add icons, images, and compelling copy.

3
Vertical — Tabs on Lefttab_layout = vertical-left

Showcase your product features here. Add icons, images, and compelling copy.

4
Vertical — Tabs on Righttab_layout = vertical-right

Showcase your product features here. Add icons, images, and compelling copy.

Section 04

4 options for tabs justify — all shown live below.

1
Left / Toptabs_justify = start

Showcase your product features here. Add icons, images, and compelling copy.

2
Centertabs_justify = center

Showcase your product features here. Add icons, images, and compelling copy.

3
Right / Bottomtabs_justify = end

Showcase your product features here. Add icons, images, and compelling copy.

4
Stretch (equal width)tabs_justify = stretch

Showcase your product features here. Add icons, images, and compelling copy.

Section 05

3 options for icon position — all shown live below.

1
Left of Labelicon_position = left

Showcase your product features here. Add icons, images, and compelling copy.

2
Above Labelicon_position = top

Showcase your product features here. Add icons, images, and compelling copy.

3
Hiddenicon_position = none

Showcase your product features here. Add icons, images, and compelling copy.

Section 06

Switch parts of the widget on or off.

1
Sync Active Tab with URL Hash — Onhash_url = yes

Showcase your product features here. Add icons, images, and compelling copy.

2
Scroll to Tabs on Switch — Onscroll_to_tab = yes

Showcase your product features here. Add icons, images, and compelling copy.

3
Hide On Desktop — Onhide_desktop = hidden-desktop

Showcase your product features here. Add icons, images, and compelling copy.