Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Navbar blocks

Pro

Goal Ring Streak Education Navbar Block for React

A navbar for a language-learning app with a daily-goal ring beside a streak button that opens a popover with the week as seven dots, today ringed, and the learner's avatar.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A navbar for a learning app in React with Base UI. The wordmark of Lessonbird, a language-learning app, leads, and Courses, Practice and Leaderboard follow as plain links, the current page marked by a foreground stroke on the bar's bottom edge. At the end of the bar a small ring filled to 68% of today's goal sits beside "68%": it is drawn in the foreground tone, so it is not a primary control, and it has a text alternative ("Today's goal: 17 of 25 points, 68% done"). Next to it a streak button, a flame and "12 day streak", opens a popover with the week as seven dots, Monday to Sunday: a filled dot for a day practised, today ringed with a hollow centre, the days to come faint. The dots are a list whose items say their state in words ("Wednesday: practised"), so the state is never colour alone. The week is typed, so no date is read. The learner's avatar closes the row. Below md the links fold into a sheet from the top; the ring and the streak stay in the bar. It's built from Circular Progress, Popover, Avatar, Navigation Menu, Sheet and Guides. The figures and the name are example data. For learning apps that keep a goal in the header.

FAQ

How do I use real progress?

Edit GOAL (points done and total), STREAK and the WEEK array (a name, a short name, how it is said and a state: done, today or later). The ring's share (PERCENT), its text alternative and the dots all derive from them. The week is typed on purpose, so the block never reads the clock; in an app, build WEEK from the learner's history with today's weekday as today.

How does a screen reader get the ring?

The ring and its percentage are drawing; the group around them is one image named "Today's goal: 17 of 25 points, 68% done". The streak button's own name carries the days ("12 day streak"), and inside the popover the dots are a list with the day and its state in words.

How does the streak popover work with a keyboard?

Enter or Space opens it and moves focus into it; Escape or a click outside closes it and puts focus back on the streak button. It isn't modal, so the bar stays reachable.

How does it work on a phone?

Below md a menu button opens a sheet from the top with the links and, below sm, the profile. The ring and the streak stay in the bar; below sm the percentage gives way to the ring alone, and below 26rem the streak shows "12" with its words kept for screen readers. The popover fits at 320 pixels.

Does anything animate?

Only the ring's stroke, which the catalog Circular Progress eases, and the popover's own entrance, which stops under reduced motion.

  • Pro

    Usage Ring AI Product Navbar

    Meters and progress

    A one-bar navbar for a language-model API: five links, and a usage ring in the bar, one button that opens a popover with the tokens used, the limit, the reset and the plan, beside an Upgrade Shine Button.

  • Pro

    Profile Checklist Progress Navbar

    Meters and progress

    A one-bar navbar for a freelancer marketplace that tracks profile completion: a hairline fill along the bar's top edge, a percentage label, and a Complete profile button that opens a checklist whose boxes raise the percentage.

  • Pro

    Day Pips Trial Countdown Navbar

    Meters and progress

    A one-bar navbar for an invoicing app in its free trial: four app links, a meter of fourteen day pips with the days to go that opens a popover of what ends, and an Upgrade Shine Button; the urgent state comes at three days.

  • Pro

    Balance Chip Fintech Navbar

    Shops and services

    A navbar for a personal-banking app with a balance chip and an eye toggle that hides the amount behind dots without changing the chip's width, a vertical divider and the account's avatar.

  • Pro

    SaaS Marketing Navbar

    Mega menus

    A one-bar marketing navbar for a product roadmap tool: a wordmark, a Product menu of four areas with icons and one-line descriptions, plain links with the current page marked, Sign in and a Shine Button, and a sheet with the same links on phones.

  • Pro

    Reading Progress Metric Banner

    Metrics

    A reading-progress banner for a long-form magazine: the article title, percent read and minutes left over a thin bar that follows the scroll of a small excerpt, driven by CSS scroll timelines where supported.

All 100 navbar blocks