Gezinme listesi

Gruplu menü

Başlıklı gruplar, rozetler ve aktif öğe.

Kodu göster

<div style="max-width:260px">
    <armada:navlist>
        <armada:navlist.group heading="Genel">
            <armada:navlist.item href="#" icon="house" current>Panel</armada:navlist.item>
            <armada:navlist.item href="#" icon="inbox" badge="12">Gelen kutusu</armada:navlist.item>
            <armada:navlist.item href="#" icon="shopping-cart" badge="Yeni" badge-tone="success">Siparişler</armada:navlist.item>
            <armada:navlist.item href="#" icon="users">Müşteriler</armada:navlist.item>
        </armada:navlist.group>
        <armada:navlist.group heading="Raporlar" expandable>
            <armada:navlist.item href="#" icon="chart-line">Satış</armada:navlist.item>
            <armada:navlist.item href="#" icon="chart-pie">Trafik</armada:navlist.item>
        </armada:navlist.group>
        <armada:navlist.group heading="Arşiv" expandable :expanded="false">
            <armada:navlist.item href="#" icon="archive">2025</armada:navlist.item>
        </armada:navlist.group>
    </armada:navlist>
</div>

Rail (ikon menü)

Sidebar 120px'ten darsa yalnız ikonlar görünür; rozet noktaya dönüşür.

Kodu göster

<div class="arm-sidebar" style="width:68px;height:auto;position:relative;border:1px solid var(--arm-border);border-radius:12px;padding:10px 8px">
    <armada:navlist>
        <armada:navlist.item href="#" icon="house" current>Panel</armada:navlist.item>
        <armada:navlist.item href="#" icon="inbox" badge="12">Gelen kutusu</armada:navlist.item>
        <armada:navlist.item href="#" icon="users">Müşteriler</armada:navlist.item>
        <armada:navlist.item href="#" icon="settings">Ayarlar</armada:navlist.item>
    </armada:navlist>
</div>

Alt menü

İç içe öğeler için girintili liste.

Kodu göster

<div style="max-width:260px">
    <armada:navlist>
        <armada:navlist.item href="#" icon="settings">Ayarlar</armada:navlist.item>
        <div class="arm-navlist__sub">
            <armada:navlist.item href="#" current>Profil</armada:navlist.item>
            <armada:navlist.item href="#">Güvenlik</armada:navlist.item>
            <armada:navlist.item href="#">Faturalama</armada:navlist.item>
        </div>
    </armada:navlist>
</div>

Özellikler

<armada:navlist.item>

Prop	Varsayılan
`href`	`null`
`icon`	`null`
`current`	`null`
`badge`	`null`
`badge-tone`	`null`

<armada:navlist.group>

Prop	Varsayılan
`heading`	`null`
`expandable`	`false`
`expanded`	`true`