BenoService

آکادمی بنو/آموزش Bootstrap

Navbar حرفه‌ای و ساخت Header در Bootstrap

بهنام نوبخت · ۱۴۰۵/۷/۱۲

Header یکی از مهم‌ترین بخش‌های هر وب‌سایت است، زیرا معمولاً اولین قسمت صفحه‌ای است که کاربر با آن مواجه می‌شود و وظیفه آن می‌تواند شامل نمایش لوگو، منوی اصلی، جستجو، ورود و ثبت‌نام، اعلان‌ها، سبد خرید و سایر امکانات مهم سایت باشد. Bootstrap با ارائه کامپوننت Navbar و مجموعه بزرگی از Utilityها این امکان را فراهم می‌کند که بدون نوشتن مقدار زیادی CSS، Headerهایی حرفه‌ای و Responsive طراحی کنیم. در مقالات قبلی با Navbar، Dropdown، Collapse و Responsive Design آشنا شدیم؛ در این مقاله این مفاهیم را در کنار یکدیگر قرار می‌دهیم و یک Header واقعی می‌سازیم. ابتدا ساختار استاندارد Navbar را بررسی می‌کنیم، سپس Logo، منوی اصلی، Dropdown، Search، دکمه‌های ورود و ثبت‌نام، منوی موبایل، حالت Sticky، Headerهای چندبخشی و طراحی RTL را یاد می‌گیریم. در پایان نیز چند نمونه عملی از Header برای سایت شرکتی، فروشگاهی و پنل مدیریتی ایجاد خواهیم کرد تا بتوانیم از این ساختارها در پروژه‌های واقعی استفاده کنیم.

Header چیست؟

Header معمولاً بخش بالایی یک صفحه وب است.

یک Header می‌تواند شامل بخش‌های مختلفی باشد:

Header
├── Logo
├── Main Navigation
├── Search
├── Notifications
├── User Menu
└── Actions

در یک سایت ساده ممکن است Header فقط شامل Logo و منوی اصلی باشد.

اما در یک فروشگاه اینترنتی ممکن است موارد زیر را نیز داشته باشد:

  • جستجو

  • حساب کاربری

  • سبد خرید

  • علاقه‌مندی‌ها

  • دسته‌بندی محصولات

Navbar در Bootstrap

Bootstrap کامپوننت Navbar را با کلاس اصلی زیر ارائه می‌کند:

<nav class="navbar">

معمولاً Navbar همراه با کلاس‌های دیگری مانند:

navbar-expand-lg
navbar-light
navbar-dark
bg-light
bg-dark

استفاده می‌شود.

ساده‌ترین Navbar

یک Navbar ساده:

<nav class="navbar navbar-expand-lg bg-light">

    <div class="container">

        <a class="navbar-brand" href="#">
            سایت من
        </a>

        <div class="navbar-nav">

            <a class="nav-link active" href="#">
                خانه
            </a>

            <a class="nav-link" href="#">
                محصولات
            </a>

            <a class="nav-link" href="#">
                درباره ما
            </a>

        </div>

    </div>

</nav>

Navbar Brand

برای نمایش Logo یا نام برند از navbar-brand استفاده می‌کنیم.

مثلاً:

<a class="navbar-brand" href="#">
    BenoService
</a>

یا می‌توانیم تصویر Logo قرار دهیم:

<a class="navbar-brand" href="#">

    <img
        src="logo.png"
        alt="لوگوی سایت"
        width="40"
        height="40">

</a>

همچنین ترکیب تصویر و متن امکان‌پذیر است:

<a
    class="navbar-brand d-flex align-items-center gap-2"
    href="#">

    <img
        src="logo.png"
        alt="لوگو"
        width="40"
        height="40">

    <span>
        سایت من
    </span>

</a>

منوی اصلی

برای منوی اصلی معمولاً از navbar-nav استفاده می‌کنیم:

<ul class="navbar-nav">

    <li class="nav-item">
        <a class="nav-link active" href="#">
            خانه
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            خدمات
        </a>
    </li>

    <li class="nav-item">
        <a class="nav-link" href="#">
            درباره ما
        </a>
    </li>

</ul>

Active Link

برای مشخص کردن صفحه فعلی:

<a
    class="nav-link active"
    aria-current="page"
    href="#">
    خانه
</a>

ویژگی:

aria-current="page"

به فناوری‌های کمکی اطلاع می‌دهد که این لینک مربوط به صفحه فعلی است.

Responsive Navbar

یکی از مهم‌ترین ویژگی‌های Navbar در Bootstrap Responsive بودن آن است.

مثلاً:

<nav class="navbar navbar-expand-lg">

عبارت:

navbar-expand-lg

یعنی Navbar از اندازه lg به بالا به شکل کامل نمایش داده شود و در اندازه‌های کوچک‌تر به حالت جمع‌شده درآید.

دکمه منوی موبایل

برای باز و بسته کردن منوی موبایل از Navbar Toggler استفاده می‌کنیم:

<button
    class="navbar-toggler"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#mainNavbar"
    aria-controls="mainNavbar"
    aria-expanded="false"
    aria-label="باز کردن منو">

    <span class="navbar-toggler-icon"></span>

</button>

سپس منوی اصلی:

<div
    class="collapse navbar-collapse"
    id="mainNavbar">

    ...

</div>

یک Navbar Responsive کامل

<nav class="navbar navbar-expand-lg bg-body-tertiary">

    <div class="container">

        <a
            class="navbar-brand"
            href="#">
            سایت من
        </a>


        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#mainNavbar"
            aria-controls="mainNavbar"
            aria-expanded="false"
            aria-label="باز کردن منو">

            <span class="navbar-toggler-icon"></span>

        </button>


        <div
            class="collapse navbar-collapse"
            id="mainNavbar">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">
                    <a
                        class="nav-link active"
                        aria-current="page"
                        href="#">
                        خانه
                    </a>
                </li>

                <li class="nav-item">
                    <a
                        class="nav-link"
                        href="#">
                        محصولات
                    </a>
                </li>

                <li class="nav-item">
                    <a
                        class="nav-link"
                        href="#">
                        خدمات
                    </a>
                </li>

                <li class="nav-item">
                    <a
                        class="nav-link"
                        href="#">
                        تماس با ما
                    </a>
                </li>

            </ul>

        </div>

    </div>

</nav>

Dropdown در Navbar

می‌توان Dropdown را در Navbar قرار داد.

<li class="nav-item dropdown">

    <a
        class="nav-link dropdown-toggle"
        href="#"
        role="button"
        data-bs-toggle="dropdown">

        محصولات

    </a>

    <ul class="dropdown-menu">

        <li>
            <a class="dropdown-item" href="#">
                محصول اول
            </a>
        </li>

        <li>
            <a class="dropdown-item" href="#">
                محصول دوم
            </a>
        </li>

        <li>
            <hr class="dropdown-divider">
        </li>

        <li>
            <a class="dropdown-item" href="#">
                مشاهده همه
            </a>
        </li>

    </ul>

</li>

این ساختار برای فروشگاه‌ها و سایت‌های خدماتی بسیار کاربردی است.

Search در Header

یکی از عناصر رایج Header، جستجو است.

<form class="d-flex" role="search">

    <input
        class="form-control me-2"
        type="search"
        placeholder="جستجو..."
        aria-label="جستجو">

    <button
        class="btn btn-outline-primary"
        type="submit">

        جستجو

    </button>

</form>

در طراحی RTL بهتر است از Utilityهای منطقی استفاده کنیم و به جای وابستگی مستقیم به left و right از start و end استفاده کنیم.

Header با Search و منوی اصلی

<nav class="navbar navbar-expand-lg bg-body-tertiary">

    <div class="container">

        <a class="navbar-brand" href="#">
            فروشگاه
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#shopNavbar"
            aria-controls="shopNavbar"
            aria-expanded="false"
            aria-label="باز کردن منو">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div
            class="collapse navbar-collapse"
            id="shopNavbar">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <li class="nav-item">
                    <a class="nav-link active" href="#">
                        خانه
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        فروشگاه
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        تخفیف‌ها
                    </a>
                </li>

            </ul>

            <form class="d-flex" role="search">

                <input
                    class="form-control"
                    type="search"
                    placeholder="جستجو..."
                    aria-label="جستجو">

                <button
                    class="btn btn-primary ms-2"
                    type="submit">

                    جستجو

                </button>

            </form>

        </div>

    </div>

</nav>

دکمه ورود و ثبت‌نام

می‌توانیم دکمه‌های کاربری را به Header اضافه کنیم:

<div class="d-flex gap-2">

    <a
        href="#"
        class="btn btn-outline-primary">
        ورود
    </a>

    <a
        href="#"
        class="btn btn-primary">
        ثبت‌نام
    </a>

</div>

Header با منوی کاربر

پس از ورود کاربر، معمولاً به جای دکمه Login، منوی حساب کاربری نمایش داده می‌شود.

<div class="dropdown">

    <button
        class="btn btn-outline-secondary dropdown-toggle"
        type="button"
        data-bs-toggle="dropdown">

        حساب کاربری

    </button>

    <ul class="dropdown-menu">

        <li>
            <a
                class="dropdown-item"
                href="#">
                پروفایل
            </a>
        </li>

        <li>
            <a
                class="dropdown-item"
                href="#">
                سفارش‌ها
            </a>
        </li>

        <li>
            <a
                class="dropdown-item"
                href="#">
                تنظیمات
            </a>
        </li>

        <li>
            <hr class="dropdown-divider">
        </li>

        <li>
            <a
                class="dropdown-item text-danger"
                href="#">
                خروج
            </a>
        </li>

    </ul>

</div>

Header با سبد خرید

برای فروشگاه اینترنتی می‌توان یک دکمه سبد خرید اضافه کرد:

<a
    href="#"
    class="btn btn-outline-primary">

    سبد خرید
    <span class="badge text-bg-danger">
        3
    </span>

</a>

در پروژه واقعی تعداد کالا معمولاً از Backend دریافت می‌شود.

Navbar در حالت Dark

Bootstrap امکان استفاده از Navbar تیره را نیز فراهم می‌کند:

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">

نمونه:

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">

    <div class="container">

        <a
            class="navbar-brand"
            href="#">
            سایت من
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#darkNavbar">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div
            class="collapse navbar-collapse"
            id="darkNavbar">

            <ul class="navbar-nav">

                <li class="nav-item">
                    <a class="nav-link active" href="#">
                        خانه
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        محصولات
                    </a>
                </li>

            </ul>

        </div>

    </div>

</nav>

استفاده از رنگ سفارشی

اگر رنگ برند شما متفاوت است، می‌توانید با CSS سفارشی آن را تغییر دهید.

مثلاً:

.main-navbar {
    background-color: #171717;
}

و:

<nav class="navbar navbar-expand-lg main-navbar">

این روش بهتر از تغییر مستقیم فایل‌های Bootstrap است.

Navbar چسبان

برای اینکه Header هنگام Scroll در بالای صفحه باقی بماند:

<nav class="navbar navbar-expand-lg sticky-top bg-body">

کلاس:

sticky-top

باعث می‌شود عنصر در زمان Scroll در موقعیت مناسب باقی بماند.

این روش برای Headerهای سایت بسیار کاربردی است.

Fixed Header

روش دیگر fixed-top است:

<nav class="navbar navbar-expand-lg fixed-top bg-body">

در این حالت Navbar در بالای صفحه ثابت می‌شود.

اما باید توجه کنیم که Header ثابت می‌تواند بخشی از محتوای صفحه را بپوشاند. بنابراین معمولاً باید برای محتوای اصلی فضای مناسب ایجاد کنیم.

مثلاً:

main {
    padding-top: 80px;
}

Header چندبخشی

در بعضی سایت‌ها Header فقط یک Navbar نیست.

مثلاً:

Top Bar
    ↓
Main Header
    ↓
Navigation
    ↓
Page Content

Top Bar می‌تواند شامل شماره تماس یا اعلان باشد:

<div class="bg-dark text-white py-2">

    <div class="container">

        <div class="d-flex
                    justify-content-between
                    align-items-center">

            <span>
                پشتیبانی: 02100000000
            </span>

            <span>
                ارسال رایگان برای سفارش‌های ویژه
            </span>

        </div>

    </div>

</div>

سپس Navbar اصلی:

<nav class="navbar navbar-expand-lg bg-body">

    <div class="container">

        <a
            class="navbar-brand"
            href="#">
            فروشگاه
        </a>

        ...

    </div>

</nav>

Header حرفه‌ای برای فروشگاه

اکنون یک نمونه کامل‌تر ایجاد کنیم.

<header>

    <div class="bg-dark text-white py-2">

        <div class="container">

            <div class="d-flex
                        justify-content-between
                        align-items-center">

                <small>
                    پشتیبانی آنلاین
                </small>

                <small>
                    ارسال رایگان سفارش‌های ویژه
                </small>

            </div>

        </div>

    </div>


    <nav
        class="navbar navbar-expand-lg bg-body sticky-top">

        <div class="container">

            <a
                class="navbar-brand fw-bold"
                href="#">
                فروشگاه من
            </a>


            <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#shopMenu"
                aria-controls="shopMenu"
                aria-expanded="false"
                aria-label="باز کردن منو">

                <span class="navbar-toggler-icon"></span>

            </button>


            <div
                class="collapse navbar-collapse"
                id="shopMenu">

                <ul
                    class="navbar-nav me-auto mb-2 mb-lg-0">

                    <li class="nav-item">

                        <a
                            class="nav-link active"
                            aria-current="page"
                            href="#">
                            خانه
                        </a>

                    </li>


                    <li class="nav-item dropdown">

                        <a
                            class="nav-link dropdown-toggle"
                            href="#"
                            role="button"
                            data-bs-toggle="dropdown">

                            محصولات

                        </a>

                        <ul class="dropdown-menu">

                            <li>
                                <a
                                    class="dropdown-item"
                                    href="#">
                                    لپ‌تاپ
                                </a>
                            </li>

                            <li>
                                <a
                                    class="dropdown-item"
                                    href="#">
                                    موبایل
                                </a>
                            </li>

                            <li>
                                <a
                                    class="dropdown-item"
                                    href="#">
                                    لوازم جانبی
                                </a>
                            </li>

                        </ul>

                    </li>


                    <li class="nav-item">

                        <a
                            class="nav-link"
                            href="#">
                            تخفیف‌ها
                        </a>

                    </li>


                    <li class="nav-item">

                        <a
                            class="nav-link"
                            href="#">
                            تماس با ما
                        </a>

                    </li>

                </ul>


                <form
                    class="d-flex mb-3 mb-lg-0 me-lg-3"
                    role="search">

                    <input
                        class="form-control"
                        type="search"
                        placeholder="جستجو..."
                        aria-label="جستجو">

                    <button
                        class="btn btn-primary ms-2"
                        type="submit">

                        جستجو

                    </button>

                </form>


                <div class="d-flex gap-2">

                    <a
                        href="#"
                        class="btn btn-outline-primary">
                        ورود
                    </a>

                    <a
                        href="#"
                        class="btn btn-primary">
                        ثبت‌نام
                    </a>

                </div>

            </div>

        </div>

    </nav>

</header>

RTL در Navbar

برای صفحات فارسی باید جهت صفحه را مشخص کنیم:

<html lang="fa" dir="rtl">

و برای Bootstrap از فایل RTL استفاده کنیم:

<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.rtl.min.css"
    rel="stylesheet">

در صفحات RTL بهتر است از کلاس‌های منطقی Bootstrap مانند:

ms-*
me-*
ps-*
pe-*
text-start
text-end

استفاده کنیم.

Navbar و منوی موبایل

در موبایل معمولاً نمی‌خواهیم تمام لینک‌ها به‌صورت هم‌زمان نمایش داده شوند.

ساختار مناسب:

Desktop
Logo | Navigation | Actions

Mobile
Logo | Menu Button
          ↓
      Navigation
      Actions

Bootstrap با navbar-toggler و collapse این رفتار را بسیار ساده می‌کند.

Navbar برای سایت شرکتی

برای یک سایت شرکتی معمولاً Header ساده‌تر است:

<nav class="navbar navbar-expand-lg bg-body">

    <div class="container">

        <a
            class="navbar-brand fw-bold"
            href="#">
            شرکت ما
        </a>

        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#companyNavbar">

            <span class="navbar-toggler-icon"></span>

        </button>

        <div
            class="collapse navbar-collapse"
            id="companyNavbar">

            <ul class="navbar-nav ms-auto">

                <li class="nav-item">
                    <a class="nav-link active" href="#">
                        خانه
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        خدمات
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        نمونه کارها
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        درباره ما
                    </a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">
                        تماس
                    </a>
                </li>

            </ul>

        </div>

    </div>

</nav>

Navbar برای پنل مدیریت

Header پنل مدیریت معمولاً ساختار متفاوتی دارد.

مثلاً:

Admin Header
├── Brand
├── Search
├── Notifications
└── User Menu

نمونه:

<nav class="navbar bg-dark navbar-dark">

    <div class="container-fluid">

        <a
            class="navbar-brand"
            href="#">
            پنل مدیریت
        </a>

        <form
            class="d-flex"
            role="search">

            <input
                class="form-control"
                type="search"
                placeholder="جستجو">

        </form>

        <div class="dropdown">

            <button
                class="btn btn-dark dropdown-toggle"
                data-bs-toggle="dropdown">

                مدیر سیستم

            </button>

            <ul class="dropdown-menu dropdown-menu-end">

                <li>
                    <a
                        class="dropdown-item"
                        href="#">
                        پروفایل
                    </a>
                </li>

                <li>
                    <a
                        class="dropdown-item"
                        href="#">
                        تنظیمات
                    </a>
                </li>

                <li>
                    <hr class="dropdown-divider">
                </li>

                <li>
                    <a
                        class="dropdown-item text-danger"
                        href="#">
                        خروج
                    </a>
                </li>

            </ul>

        </div>

    </div>

</nav>

نکات مهم در طراحی Header

1. Header را بیش از حد شلوغ نکنید

قرار دادن تعداد زیادی لینک، دکمه و آیکون در Header می‌تواند رابط کاربری را پیچیده کند.

2. مهم‌ترین Navigation را مشخص کنید

کاربر باید بتواند به مهم‌ترین صفحات سایت به‌سادگی دسترسی پیدا کند.

3. در موبایل اولویت‌بندی کنید

در صفحه کوچک همه عناصر Desktop را نمی‌توان با همان شکل نمایش داد.

4. از Utilityها استفاده کنید

Bootstrap Utilityها می‌توانند مقدار زیادی CSS سفارشی را حذف کنند.

5. به Accessibility توجه کنید

برای دکمه منوی موبایل حتماً aria-label و وضعیت aria-expanded را در نظر بگیرید.

Bootstrap Bundle

از آنجا که Navbar Responsive از Collapse و Dropdown استفاده می‌کند، JavaScript Bootstrap باید در صفحه وجود داشته باشد:

<script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js">
</script>

تمرین عملی

یک Header برای یک سایت شرکتی ایجاد کنید.

Header باید شامل موارد زیر باشد:

  • Logo

  • خانه

  • خدمات

  • محصولات

  • درباره ما

  • تماس با ما

  • Dropdown محصولات

  • دکمه ورود

  • دکمه ثبت‌نام

  • منوی موبایل

  • طراحی RTL

  • Responsive Design

تمرین فروشگاهی

یک Header کامل فروشگاه طراحی کنید که شامل:

  • Top Bar

  • Logo

  • منوی دسته‌بندی

  • Search

  • سبد خرید

  • تعداد کالاها

  • حساب کاربری

  • Dropdown حساب کاربری

  • منوی موبایل

  • Sticky Navbar

باشد.

تمرین پیشرفته

یک Header برای پنل مدیریت طراحی کنید.

ساختار پیشنهادی:

Admin Panel
├── Logo
├── Search
├── Notifications
├── User Dropdown
└── Responsive Menu

در این تمرین:

  1. Header را RTL کنید.

  2. Navbar را Responsive کنید.

  3. Dropdown حساب کاربری ایجاد کنید.

  4. تعداد Notification را با Badge نمایش دهید.

  5. Search را اضافه کنید.

  6. Header را Sticky کنید.

  7. در موبایل عناصر غیرضروری را جمع کنید.

  8. از Utilityهای Bootstrap به جای CSS اضافی تا حد امکان استفاده کنید.

جمع‌بندی

در این مقاله یاد گرفتیم چگونه با استفاده از Navbar در Bootstrap Headerهای حرفه‌ای و Responsive ایجاد کنیم. با ساختار Navbar، Logo، Navigation، Active Link، Dropdown، Search، دکمه‌های ورود و ثبت‌نام، حساب کاربری، سبد خرید، حالت Dark، Sticky Header، Fixed Header و Headerهای چندبخشی آشنا شدیم. همچنین نحوه طراحی Navbar برای سایت‌های شرکتی، فروشگاهی و پنل‌های مدیریت را بررسی کردیم و یاد گرفتیم چگونه یک Header فارسی و RTL را با استفاده از Bootstrap RTL ایجاد کنیم. در طراحی Header باید همیشه به سادگی، اولویت‌بندی محتوا، Responsive بودن و Accessibility توجه داشته باشیم.

۱۰

نظرات

کد در دسترس نیست

هنوز نظری ثبت نشده است.