أنماط التنقل

<nav class="p-breadcrumb" aria-label="مسار الصفحة">
<a href="index.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<rect x="3" y="3" width="7" height="7" rx="2"/>
<rect x="14" y="3" width="7" height="7" rx="2"/>
<rect x="3" y="14" width="7" height="7" rx="2"/>
<rect x="14" y="14" width="7" height="7" rx="2"/>
</svg>
</a>
<svg class="icon directional" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9 5 7 7-7 7"/>
</svg>
<a href="pages/commerce/catalog.html">كتالوج المنتجات</a>
<svg class="icon directional" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="m9 5 7 7-7 7"/>
</svg>
<span aria-current="page">إضافة وتعديل منتج</span>
</nav>

<div data-premium-tabs>
<div class="p-segmented" role="tablist" aria-label="التبويبات">
<button role="tab" id="p-tab-0" aria-controls="p-panel-0" aria-selected="true" aria-pressed="true" tabindex="0" data-premium-tab="0">نظرة عامة</button>
<button role="tab" id="p-tab-1" aria-controls="p-panel-1" aria-selected="false" aria-pressed="false" tabindex="-1" data-premium-tab="1">النشاط</button>
<button role="tab" id="p-tab-2" aria-controls="p-panel-2" aria-selected="false" aria-pressed="false" tabindex="-1" data-premium-tab="2">الملفات</button>
</div>
<section class="p-tab-panel" role="tabpanel" id="p-panel-0" aria-labelledby="p-tab-0" >كل ما تحتاجه لبناء واجهة مدروسة ومتناسقة.</section>
<section class="p-tab-panel" role="tabpanel" id="p-panel-1" aria-labelledby="p-tab-1" hidden>تابع التغييرات المهمة وأبقِ فريقك على اطلاع.</section>
<section class="p-tab-panel" role="tabpanel" id="p-panel-2" aria-labelledby="p-tab-2" hidden>نظّم ملفات مشروعك لتصل إليها بسهولة.</section>
</div>

<div class="p-segmented" role="group" aria-label="فترة التقرير">
<button data-premium-segment="month" aria-pressed="true">هذا الشهر</button>
<button data-premium-segment="quarter" aria-pressed="false">هذا الربع</button>
<button data-premium-segment="year" aria-pressed="false">هذا العام</button>
</div>
<p class="p-note" data-segment-output role="status">هذا الشهر</p>

<nav aria-label="ترقيم الصفحات" class="flex wrap" data-pagination-example>
<button class="btn btn-primary btn-sm" data-example-page="1" aria-current="page">1</button>
<button class="btn btn-secondary btn-sm" data-example-page="2" >2</button>
<button class="btn btn-secondary btn-sm" data-example-page="3" >3</button>
<button class="btn btn-secondary btn-sm" data-example-page="4" >4</button>
<button class="btn btn-secondary btn-sm" data-example-page="5" >5</button>
</nav>
<p class="p-note" data-pagination-result role="status">صفحة 1 / 5</p>

<div class="p-checkout-steps">
<div class="is-active">
<b>1</b>مساحة العمل</div>
<div class="is-active">
<b>2</b>الفريق</div>
<div class="">
<b>3</b>مراجعة وإنهاء</div>
</div>
<a class="btn btn-primary" href="pages/system/onboarding.html">
<svg class="icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M5 12h14m-5-5 5 5-5 5"/>
</svg>إعداد مساحة العمل</a>