مرکزی مواد پر جائیں۔ ڈاکس نیویگیشن پر جائیں۔
in English

نوبار

بوٹسٹریپ کے طاقتور، ذمہ دار نیویگیشن ہیڈر، navbar کے لیے دستاویزات اور مثالیں۔ برانڈنگ، نیویگیشن اور مزید کے لیے سپورٹ شامل ہے، بشمول ہمارے کولپس پلگ ان کے لیے سپورٹ۔

یہ کیسے کام کرتا ہے

نیوبار کے ساتھ شروع کرنے سے پہلے آپ کو یہ جاننے کی ضرورت ہے:

  • ریسپانسیو کولاپسنگ اور کلر اسکیم کلاسز .navbarکے لیے Navbars کو ریپنگ کی ضرورت ہوتی ہے ۔.navbar-expand{-sm|-md|-lg|-xl|-xxl}
  • Navbars اور ان کے مشمولات بطور ڈیفالٹ سیال ہوتے ہیں۔ کنٹینر کی افقی چوڑائی کو مختلف طریقوں سے محدود کرنے کے لیے تبدیل کریں ۔
  • نیوبارز کے اندر وقفہ کاری اور صف بندی کو کنٹرول کرنے کے لیے ہماری اسپیسنگ اور فلیکس یوٹیلیٹی کلاسز کا استعمال کریں۔
  • Navbars بطور ڈیفالٹ جوابدہ ہوتے ہیں، لیکن آپ اسے تبدیل کرنے کے لیے آسانی سے ان میں ترمیم کر سکتے ہیں۔ جوابی رویہ ہمارے کولپس جاوا اسکرپٹ پلگ ان پر منحصر ہے۔
  • کسی عنصر کا استعمال کرتے ہوئے رسائی کو یقینی بنائیں <nav>یا، اگر کوئی زیادہ عام عنصر استعمال کر رہے ہیں جیسے کہ ، ہر navbar میں <div>a کا اضافہ کریں role="navigation"تاکہ اسے معاون ٹیکنالوجیز کے صارفین کے لیے ایک تاریخی خطہ کے طور پر واضح طور پر شناخت کیا جا سکے۔
  • aria-current="page"موجودہ صفحہ کے لیے یا سیٹ میں موجودہ آئٹم کے لیے استعمال کر کے موجودہ آئٹم کی نشاندہی aria-current="true"کریں۔
prefers-reduced-motionاس جزو کا اینیمیشن اثر میڈیا کے استفسار پر منحصر ہے ۔ ہماری ایکسیسبیلٹی دستاویزات کا کم موشن سیکشن دیکھیں ۔

تائید شدہ مواد

Navbars مٹھی بھر ذیلی اجزاء کے لیے بلٹ ان سپورٹ کے ساتھ آتے ہیں۔ ضرورت کے مطابق درج ذیل میں سے انتخاب کریں:

  • .navbar-brandآپ کی کمپنی، پروڈکٹ، یا پروجیکٹ کے نام کے لیے۔
  • .navbar-navپوری اونچائی اور ہلکے وزن والے نیویگیشن کے لیے (بشمول ڈراپ ڈاؤن کے لیے سپورٹ)۔
  • .navbar-togglerہمارے کولپس پلگ ان اور دیگر نیویگیشن ٹوگلنگ رویوں کے ساتھ استعمال کے لیے۔
  • کسی بھی شکل کے کنٹرول اور اعمال کے لیے فلیکس اور اسپیسنگ یوٹیلیٹیز۔
  • .navbar-textمتن کے عمودی طور پر مرکز والے تاروں کو شامل کرنے کے لیے۔
  • .collapse.navbar-collapseپیرنٹ بریک پوائنٹ کے ذریعے navbar کے مواد کو گروپ کرنے اور چھپانے کے لیے۔
  • .navbar-scrollسیٹ کرنے کے لیے ایک اختیاری شامل کریں اور توسیع شدہ نیوبار موادmax-height کو اسکرول کریں ۔

یہاں ایک ریسپانسیو لائٹ تھیم والے نیوبار میں شامل تمام ذیلی اجزاء کی ایک مثال ہے جو خود بخود lg(بڑے) بریک پوائنٹ پر گر جاتی ہے۔

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

یہ مثال پس منظر ( bg-light) اور اسپیسنگ ( my-2, my-lg-0, me-sm-0, my-sm-0) یوٹیلیٹی کلاسز کا استعمال کرتی ہے۔

برانڈ

زیادہ تر عناصر پر لاگو کیا .navbar-brandجا سکتا ہے، لیکن ایک اینکر بہترین کام کرتا ہے، کیونکہ کچھ عناصر کو یوٹیلیٹی کلاسز یا حسب ضرورت طرز کی ضرورت ہو سکتی ہے۔

متن

.navbar-brandکلاس کے ساتھ ایک عنصر کے اندر اپنا متن شامل کریں ۔

<!-- As a link -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-brand mb-0 h1">Navbar</span>
  </div>
</nav>

تصویر

آپ کے اندر موجود متن کو .navbar-brandایک سے بدل سکتے ہیں <img>۔

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24">
    </a>
  </div>
</nav>

تصویر اور متن

آپ ایک ہی وقت میں تصویر اور متن شامل کرنے کے لیے کچھ اضافی افادیت کا استعمال بھی کر سکتے ہیں۔ .d-inline-blockکا اضافہ اور .align-text-topاس پر نوٹ کریں <img>۔

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">
      <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top">
      Bootstrap
    </a>
  </div>
</nav>

Navbar نیویگیشن لنکس ہمارے .navآپشنز پر اپنی موڈیفائر کلاس کے ساتھ بناتے ہیں اور مناسب ریسپانسیو اسٹائلنگ کے لیے ٹوگلر کلاسز کے استعمال کی ضرورت ہوتی ہے۔ navbars میں نیویگیشن آپ کے navbar کے مواد کو محفوظ طریقے سے سیدھ میں رکھنے کے لیے زیادہ سے زیادہ افقی جگہ پر قبضہ کرنے کے لیے بھی بڑھے گی ۔

موجودہ صفحہ کی نشاندہی کرنے کے لیے .activeکلاس کو شامل کریں ۔.nav-link

براہ کرم نوٹ کریں کہ آپ کو aria-currentایکٹیو پر بھی وصف شامل کرنا چاہیے .nav-link۔

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

اور چونکہ ہم اپنے navs کے لیے کلاسز کا استعمال کرتے ہیں، اگر آپ چاہیں تو آپ فہرست پر مبنی نقطہ نظر سے مکمل طور پر بچ سکتے ہیں۔

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
        <a class="nav-link" href="#">Features</a>
        <a class="nav-link" href="#">Pricing</a>
        <a class="nav-link disabled">Disabled</a>
      </div>
    </div>
  </div>
</nav>

آپ اپنے نیوبار میں ڈراپ ڈاؤن بھی استعمال کر سکتے ہیں۔ ڈراپ ڈاؤن مینو میں پوزیشننگ کے لیے ریپنگ عنصر کی ضرورت ہوتی ہے، اس لیے اس بات کو یقینی بنائیں کہ ذیل میں دکھایا گیا ہے .nav-itemاور اس کے لیے علیحدہ اور نیسٹڈ عناصر استعمال کریں۔.nav-link

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>

فارمز

نیوبار کے اندر مختلف فارم کنٹرولز اور اجزاء رکھیں:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

.navbarفلیکس لے آؤٹ کے فوری چائلڈ عناصر استعمال کریں اور ڈیفالٹ پر ہوں justify-content: space-betweenگے۔ اس رویے کو ایڈجسٹ کرنے کے لیے ضرورت کے مطابق اضافی فلیکس یوٹیلیٹیز استعمال کریں۔

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand">Navbar</a>
    <form class="d-flex">
      <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success" type="submit">Search</button>
    </form>
  </div>
</nav>

ان پٹ گروپس بھی کام کرتے ہیں۔ اگر آپ کا navbar ایک مکمل شکل ہے، یا زیادہ تر ایک شکل ہے، تو آپ <form>عنصر کو کنٹینر کے طور پر استعمال کر سکتے ہیں اور کچھ HTML کو محفوظ کر سکتے ہیں۔

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid">
    <div class="input-group">
      <span class="input-group-text" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
    </div>
  </form>
</nav>

ان نوبار فارمز کے حصے کے طور پر بھی مختلف بٹن سپورٹ کیے جاتے ہیں۔ یہ ایک زبردست یاد دہانی بھی ہے کہ عمودی سیدھ کی افادیت مختلف سائز کے عناصر کو سیدھ میں لانے کے لیے استعمال کی جا سکتی ہے��

<nav class="navbar navbar-light bg-light">
  <form class="container-fluid justify-content-start">
    <button class="btn btn-outline-success me-2" type="button">Main button</button>
    <button class="btn btn-sm btn-outline-secondary" type="button">Smaller button</button>
  </form>
</nav>

متن

Navbars کی مدد سے متن کے بٹس پر مشتمل ہو سکتا ہے .navbar-text۔ یہ کلاس متن کے تاروں کے لیے عمودی سیدھ اور افقی وقفہ کاری کو ایڈجسٹ کرتی ہے۔

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <span class="navbar-text">
      Navbar text with an inline element
    </span>
  </div>
</nav>

ضرورت کے مطابق دوسرے اجزاء اور افادیت کے ساتھ ملائیں اور میچ کریں۔

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar w/ text</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
      </ul>
      <span class="navbar-text">
        Navbar text with an inline element
      </span>
    </div>
  </div>
</nav>

رنگ سکیمیں

تھیمنگ کلاسز اور background-colorیوٹیلیٹیز کے امتزاج کی بدولت نوبار کو تھیم کرنا کبھی بھی آسان نہیں تھا۔ .navbar-lightہلکے پس منظر کے رنگوں کے ساتھ استعمال کے لیے، یا .navbar-darkگہرے پس منظر کے رنگوں میں سے انتخاب کریں ۔ پھر، .bg-*افادیت کے ساتھ اپنی مرضی کے مطابق بنائیں۔

<nav class="navbar navbar-dark bg-dark">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-dark bg-primary">
  <!-- Navbar content -->
</nav>

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">
  <!-- Navbar content -->
</nav>

کنٹینرز

.containerاگرچہ اس کی ضرورت نہیں ہے، آپ ایک صفحہ پر اسے بیچ میں رکھنے کے لیے ایک navbar کو لپیٹ سکتے ہیں ۔ یا آپ کسی فکسڈ یا سٹیٹک ٹاپ نیوبار.navbar کے مواد کو صرف مرکز میں رکھنے کے لیے اندر ایک کنٹینر شامل کر سکتے ہیں ۔

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
  </nav>
</div>

کسی بھی ریسپانسیو کنٹینرز کو تبدیل کرنے کے لیے استعمال کریں کہ آپ کے نیوبار میں موجود مواد کو کتنا وسیع کیا گیا ہے۔

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-md">
    <a class="navbar-brand" href="#">Navbar</a>
  </div>
</nav>

جگہ کا تعین

نیوبارز کو غیر جامد جگہوں پر رکھنے کے لیے ہماری پوزیشن یوٹیلیٹیز استعمال کریں۔ اوپر سے فکسڈ، نیچے سے فکسڈ، یا اوپر سے چپکا ہوا میں سے انتخاب کریں (صفحہ کے ساتھ اس وقت تک اسکرول کریں جب تک کہ یہ اوپر نہ پہنچ جائے، پھر وہیں رہتا ہے)۔ فکسڈ navbars استعمال کرتے ہیں position: fixed، یعنی وہ DOM کے عام بہاؤ سے کھینچے جاتے ہیں اور دوسرے عناصر کے ساتھ اوورلیپ کو روکنے کے لیے حسب ضرورت CSS (مثلاً، padding-topon the ) کی ضرورت پڑ سکتی ہے۔<body>

یہ بھی نوٹ کریں کہ .sticky-topاستعمال کرتا ہے position: sticky، جو ہر براؤزر میں مکمل طور پر تعاون یافتہ نہیں ہے ۔

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Default</a>
  </div>
</nav>
<nav class="navbar fixed-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed top</a>
  </div>
</nav>
<nav class="navbar fixed-bottom navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Fixed bottom</a>
  </div>
</nav>
<nav class="navbar sticky-top navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Sticky top</a>
  </div>
</nav>

سکرولنگ

ٹوٹے ہوئے نیوبار کے ٹوگل ایبل مواد کے اندر عمودی اسکرولنگ کو فعال .navbar-nav-scrollکرنے کے لیے ایک (یا دیگر navbar ذیلی جزو) میں شامل کریں ۔ .navbar-navپہلے سے طے شدہ طور پر، اسکرولنگ 75vh(یا ویو پورٹ کی اونچائی کے 75%) پر شروع ہوتی ہے، لیکن آپ اسے مقامی CSS کسٹم پراپرٹی --bs-navbar-heightیا اپنی مرضی کے انداز کے ساتھ اوور رائڈ کر سکتے ہیں۔ بڑے ویو پورٹ پر جب navbar کو بڑھایا جائے گا، مواد ظاہر ہوگا جیسا کہ یہ ڈیفالٹ navbar میں ہوتا ہے۔

overflowبراہ کرم نوٹ کریں کہ یہ طرز عمل —when سیٹنگ overflow-y: auto(یہاں مواد کو اسکرول کرنے کی ضرورت ہے) کی ممکنہ خرابی کے ساتھ آتا ہے ، overflow-xکے مساوی ہے auto، جو کچھ افقی مواد کو تراشے گا۔

زیادہ سے زیادہ وقفہ کاری کے لیے کچھ اضافی مارجن یوٹیلیٹیز کے .navbar-nav-scrollساتھ ، کے ساتھ استعمال کرنے والی navbar کی ایک مثال یہ ہے۔style="--bs-scroll-height: 100px;"

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar scroll</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Link
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Link</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

جوابدہ طرز عمل

Navbars .navbar-toggler, .navbar-collapse, اور .navbar-expand{-sm|-md|-lg|-xl|-xxl}کلاسز کا استعمال کر سکتے ہیں اس بات کا تعین کرنے کے لیے کہ ان کا مواد بٹن کے پیچھے کب گرتا ہے۔ دیگر افادیت کے ساتھ مل کر، آپ آسانی سے انتخاب کر سکتے ہیں کہ مخصوص عناصر کو کب دکھانا یا چھپانا ہے۔

نیوبارز کے لیے جو کبھی نہیں ٹوٹتے ہیں، نوبار .navbar-expandپر کلاس شامل کریں۔ نیوبارز کے لیے جو ہمیشہ گرتے ہیں، کوئی .navbar-expandکلاس شامل نہ کریں۔

ٹوگلر

Navbar ٹوگلرز بذریعہ ڈیفالٹ بائیں سیدھ میں ہوتے ہیں، لیکن اگر وہ کسی بہن بھائی کے عنصر کی پیروی کریں جیسے کہ .navbar-brand، وہ خود بخود انتہائی دائیں طرف منسلک ہو جائیں گے۔ اپنے مارک اپ کو ریورس کرنے سے ٹوگلر کی جگہ کا تعین الٹ جائے گا۔ ذیل میں مختلف ٹوگل اسٹائل کی مثالیں ہیں۔

.navbar-brandسب سے چھوٹے بریک پوائنٹ پر دکھائے بغیر :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
      <a class="navbar-brand" href="#">Hidden brand</a>
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

بائیں طرف دکھائے گئے برانڈ نام اور دائیں طرف ٹوگلر کے ساتھ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

بائیں طرف ٹوگلر اور دائیں طرف برانڈ نام کے ساتھ:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

بیرونی مواد

کبھی کبھی آپ کولپس پلگ ان کو استعمال کرنا چاہتے ہیں تاکہ ایسے مواد کے لیے کنٹینر عنصر کو متحرک کیا جا سکے جو ساختی طور پر سے باہر بیٹھا ہو .navbar۔ کیونکہ ہمارا پلگ ان idاور data-bs-targetملاپ پر کام کرتا ہے، یہ آسانی سے ہو جاتا ہے!

<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>
<nav class="navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

جب آپ یہ کرتے ہیں، تو ہم تجویز کرتے ہیں کہ اضافی JavaScript شامل کریں تاکہ کنٹینر کے کھلنے پر پروگرام کے لحاظ سے توجہ مرکوز کی جا سکے۔ بصورت دیگر، کی بورڈ استعمال کرنے والوں اور معاون ٹیکنالوجیز کے استعمال کنندگان کو نئے انکشاف شدہ مواد کو تلاش کرنے میں دشواری کا سامنا کرنا پڑے گا - خاص طور پر اگر کنٹینر جو کھولا گیا تھا وہ دستاویز کے ڈھانچے میں ٹوگلر سے پہلے آتا ہے۔ ہم یہ بھی تجویز کرتے ہیں کہ مواد کے کنٹینر کی طرف اشارہ کرتے ہوئے اس بات کو یقینی بنائیں کہ ٹوگلر میں aria-controlsوصف موجود ہے۔ idنظریہ طور پر، یہ معاون ٹیکنالوجی کے صارفین کو ٹوگلر سے براہ راست اس کنٹینر پر جانے کی اجازت دیتا ہے جسے وہ کنٹرول کرتا ہے- لیکن اس کے لیے سپورٹ فی الحال کافی پیچیدہ ہے۔

آف کینوس

آف کینوس پلگ ان کے ساتھ اپنے پھیلتے اور گرتے ہوئے نیوبار کو آف کینوس دراز میں تبدیل کریں۔ ہم دونوں آف کینوس ڈیفالٹ اسٹائل کو بڑھاتے ہیں اور .navbar-expand-*ایک متحرک اور لچکدار نیویگیشن سائڈبار بنانے کے لیے اپنی کلاسز کا استعمال کرتے ہیں۔

ذیل کی مثال میں، ایک آف کینوس نیوبار بنانے کے لیے جو ہمیشہ تمام بریک پوائنٹس پر منہدم ہوتا ہے، .navbar-expand-*کلاس کو مکمل طور پر چھوڑ دیں۔

<nav class="navbar navbar-light bg-light fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Offcanvas navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="offcanvasNavbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              Dropdown
            </a>
            <ul class="dropdown-menu" aria-labelledby="offcanvasNavbarDropdown">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
      </div>
    </div>
  </div>
</nav>

ایک آف کینوس نیوبار بنانے کے لیے جو کسی مخصوص بریک پوائنٹ پر عام نیوبار میں پھیل جائے جیسے lg، استعمال کریں .navbar-expand-lg۔

<nav class="navbar navbar-light navbar-expand-lg bg-light fixed-top">
  <a class="navbar-brand" href="#">Offcanvas navbar</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="offcanvas offcanvas-end" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
    ...
  </div>
</nav>

سس

متغیرات

$navbar-padding-y:                  $spacer * .5;
$navbar-padding-x:                  null;

$navbar-nav-link-padding-x:         .5rem;

$navbar-brand-font-size:            $font-size-lg;
// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2;
$navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) * .5;
$navbar-brand-margin-end:           1rem;

$navbar-toggler-padding-y:          .25rem;
$navbar-toggler-padding-x:          .75rem;
$navbar-toggler-font-size:          $font-size-lg;
$navbar-toggler-border-radius:      $btn-border-radius;
$navbar-toggler-focus-width:        $btn-focus-width;
$navbar-toggler-transition:         box-shadow .15s ease-in-out;
$navbar-dark-color:                 rgba($white, .55);
$navbar-dark-hover-color:           rgba($white, .75);
$navbar-dark-active-color:          $white;
$navbar-dark-disabled-color:        rgba($white, .25);
$navbar-dark-toggler-icon-bg:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-dark-toggler-border-color:  rgba($white, .1);

$navbar-light-color:                rgba($black, .55);
$navbar-light-hover-color:          rgba($black, .7);
$navbar-light-active-color:         rgba($black, .9);
$navbar-light-disabled-color:       rgba($black, .3);
$navbar-light-toggler-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
$navbar-light-toggler-border-color: rgba($black, .1);

$navbar-light-brand-color:                $navbar-light-active-color;
$navbar-light-brand-hover-color:          $navbar-light-active-color;
$navbar-dark-brand-color:                 $navbar-dark-active-color;
$navbar-dark-brand-hover-color:           $navbar-dark-active-color;

لوپ

ریسپانسیو نیوبار ایکسپینڈ/کلاپس کلاسز (مثلاً، .navbar-expand-lg) کو $breakpointsنقشے کے ساتھ جوڑا جاتا ہے اور ان میں لوپ کے ذریعے تیار کیا جاتا ہے scss/_navbar.scss۔

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    // stylelint-disable-next-line scss/selector-no-union-class-name
    &#{$infix} {
      @include media-breakpoint-up($next) {
        flex-wrap: nowrap;
        justify-content: flex-start;

        .navbar-nav {
          flex-direction: row;

          .dropdown-menu {
            position: absolute;
          }

          .nav-link {
            padding-right: $navbar-nav-link-padding-x;
            padding-left: $navbar-nav-link-padding-x;
          }
        }

        .navbar-nav-scroll {
          overflow: visible;
        }

        .navbar-collapse {
          display: flex !important; // stylelint-disable-line declaration-no-important
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }

        .offcanvas-header {
          display: none;
        }

        .offcanvas {
          position: inherit;
          bottom: 0;
          z-index: 1000;
          flex-grow: 1;
          visibility: visible !important; // stylelint-disable-line declaration-no-important
          background-color: transparent;
          border-right: 0;
          border-left: 0;
          @include transition(none);
          transform: none;
        }
        .offcanvas-top,
        .offcanvas-bottom {
          height: auto;
          border-top: 0;
          border-bottom: 0;
        }

        .offcanvas-body {
          display: flex;
          flex-grow: 0;
          padding: 0;
          overflow-y: visible;
        }
      }
    }
  }
}