Navs and tabs

Twitter bootstrap Documentation

Base nav

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([
    ['label' => 'Active', 'uri' => '#', 'active' => true],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
]), ['page' => true]);

echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([
    ['label' => 'Active', 'uri' => '#', 'active' => true],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
]), ['list' => false, 'page' => true]);

Available styles

Twitter bootstrap Documentation

Horizontal alignment

Twitter bootstrap Documentation

Result

Source

<?php

// Centered with option 'center'
echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([
    ['label' => 'Active', 'uri' => '#', 'active' => true],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
]), ['centered' => true, 'page' => true]);

// Right-aligned with option 'right_aligned'
echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([
    ['label' => 'Active', 'uri' => '#', 'active' => true],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
]), ['right_aligned' => true, 'page' => true]);

Vertical

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->menu()->renderMenu(
    new \Laminas\Navigation\Navigation([
        ['label' => 'Active', 'uri' => '#', 'active' => true],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    ['vertical' => true, 'page' => true]
);

echo $this->navigation()->menu()->renderMenu(
    new \Laminas\Navigation\Navigation([
        ['label' => 'Active', 'uri' => '#', 'active' => true],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    [
        'vertical' => true,
        'list' => false,
        'page' => true,
    ]
);

Tabs

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([
    ['label' => 'Active', 'uri' => '#', 'active' => true],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
]), ['tabs' => true, 'page' => true]);

Pills

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([
    ['label' => 'Active', 'uri' => '#', 'active' => true],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Link', 'uri' => '#'],
    ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
]), ['pills' => true, 'page' => true]);

Fill and justify

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->menu()->renderMenu(
    new \Laminas\Navigation\Navigation([
        ['label' => 'Active', 'uri' => '#', 'active' => true],
        ['label' => 'Much longer nav link', 'uri' => '#'],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    [
        'pills' => true,
        'fill' => true,
        'page' => true,
    ]
);

echo PHP_EOL . '<br/>';

echo $this->navigation()->menu()->renderMenu(
    new \Laminas\Navigation\Navigation([
        ['label' => 'Active', 'uri' => '#', 'active' => true],
        ['label' => 'Much longer nav link', 'uri' => '#'],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    [
        'pills' => true,
        'fill' => true,
        'list' => false,
        'page' => true,
    ]
);

echo PHP_EOL . '<br/>';

echo $this->navigation()->menu()->renderMenu(
    new \Laminas\Navigation\Navigation([
        ['label' => 'Active', 'uri' => '#', 'active' => true],
        ['label' => 'Much longer nav link', 'uri' => '#'],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    [
        'pills' => true,
        'justified' => true,
        'page' => true,
    ]
);

echo PHP_EOL . '<br/>';

echo $this->navigation()->menu()->renderMenu(
    new \Laminas\Navigation\Navigation([
        ['label' => 'Active', 'uri' => '#', 'active' => true],
        ['label' => 'Much longer nav link', 'uri' => '#'],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    [
        'pills' => true,
        'justified' => true,
        'list' => false,
        'page' => true,
    ]
);

Working with flex utilities

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->menu()->renderMenu(new \Laminas\Navigation\Navigation([
    ['label' => 'Active', 'uri' => '#', 'active' => true, 'class' => 'flex-sm-fill text-sm-center'],
    ['label' => 'Longer nav link', 'uri' => '#', 'class' => 'flex-sm-fill text-sm-center'],
    ['label' => 'Link', 'uri' => '#', 'class' => 'flex-sm-fill text-sm-center'],
    ['label' => 'Disabled', 'uri' => '#', 'visible' => false, 'class' => 'flex-sm-fill text-sm-center'],
]), [
    'page' => true,
    'list' => false,
    'pills' => true,
    'ulClass' => 'flex-column flex-sm-row nav',
]);

Using dropdowns

Twitter bootstrap Documentation

Tabs with dropdowns

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->menu()->renderMenu(
    new \Laminas\Navigation\Navigation([
        ['label' => 'Active', 'uri' => '#', 'active' => true],
        [
            'type' => \TwbsHelper\Navigation\Page\DropdownPage::class,
            'label' => 'Dropdown',
            'dropdown' => [
                'Action',
                'Another action',
                'Something else here',
                '---',
                'Separated link',
            ],
        ],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    ['tabs' => true, 'page' => true]
);

Pills with dropdowns

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->navigation()->menu()->renderMenu(
    new \Laminas\Navigation\Navigation([
        ['label' => 'Active', 'uri' => '#', 'active' => true],
        [
            'type' => \TwbsHelper\Navigation\Page\DropdownPage::class,
            'label' => 'Dropdown',
            'dropdown' => [
                'Action',
                'Another action',
                'Something else here',
                '---',
                'Separated link',
            ],
        ],
        ['label' => 'Link', 'uri' => '#'],
        ['label' => 'Disabled', 'uri' => '#', 'visible' => false],
    ]),
    ['pills' => true, 'page' => true]
);