Как сделать навигацию в Telegram-боте: inline-кнопки, reply-меню, команды и Mini App — полное руководство

from aiogram import Bot, Dispatcher, F
from aiogram.types import InlineKeyboardMarkup, InlineKeyboardButton, CallbackQuery
from aiogram.filters import CommandStart

bot = Bot(token="YOUR_BOT_TOKEN")
dp = Dispatcher()

# Главное меню
def main_menu() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        [
            InlineKeyboardButton(text="📦 Каталог", callback_data="catalog"),
            InlineKeyboardButton(text="🛒 Корзина", callback_data="cart"),
        ],
        [
            InlineKeyboardButton(text="📞 Поддержка", callback_data="support"),
            InlineKeyboardButton(text="⚙️ Настройки", callback_data="settings"),
        ],
    ])

@dp.message(CommandStart())
async def start(message):
    await message.answer(
        "Привет! Выберите раздел:",
        reply_markup=main_menu()
    )

# Обработка нажатий
@dp.callback_query(F.data == "catalog")
async def show_catalog(callback: CallbackQuery):
    # Обновляем сообщение вместо отправки нового
    await callback.message.edit_text(
        "📦 Каталог товаров:",
        reply_markup=InlineKeyboardMarkup(inline_keyboard=[
            [InlineKeyboardButton(text="← Назад", callback_data="back_main")],
        ])
    )
    await callback.answer()  # убираем "часики" на кнопке

@dp.callback_query(F.data == "back_main")
async def back_to_main(callback: CallbackQuery):
    await callback.message.edit_text(
        "Главное меню:",
        reply_markup=main_menu()
    )
    await callback.answer()

const { Bot, InlineKeyboard } = require('grammy');
const bot = new Bot('YOUR_BOT_TOKEN');

// Функция создания главного меню
function mainMenu() {
    return new InlineKeyboard()
        .text('📦 Каталог', 'catalog').text('🛒 Корзина', 'cart').row()
        .text('📞 Поддержка', 'support').text('⚙️ Настройки', 'settings');
}

bot.command('start', async (ctx) => {
    await ctx.reply('Привет! Выберите раздел:', {
        reply_markup: mainMenu(),
    });
});

bot.callbackQuery('catalog', async (ctx) => {
    await ctx.editMessageText('📦 Каталог товаров:', {
        reply_markup: new InlineKeyboard().text('← Назад', 'back_main'),
    });
    await ctx.answerCallbackQuery();
});

bot.callbackQuery('back_main', async (ctx) => {
    await ctx.editMessageText('Главное меню:', {
        reply_markup: mainMenu(),
    });
    await ctx.answerCallbackQuery();
});

InlineKeyboardButton(
    text="🌐 Открыть сайт",
    url="https://your-site.ru"
)

from aiogram.types import ReplyKeyboardMarkup, KeyboardButton, ReplyKeyboardRemove

def main_reply_keyboard() -> ReplyKeyboardMarkup:
    return ReplyKeyboardMarkup(
        keyboard=[
            [KeyboardButton(text="📦 Каталог"), KeyboardButton(text="🛒 Корзина")],
            [KeyboardButton(text="📞 Поддержка"), KeyboardButton(text="ℹ️ О нас")],
        ],
        resize_keyboard=True,   # компактный размер
        one_time_keyboard=False # не скрывать после нажатия
    )

@dp.message(CommandStart())
async def start(message):
    await message.answer(
        "Выберите раздел:",
        reply_markup=main_reply_keyboard()
    )

# Обработка нажатия по тексту кнопки
@dp.message(F.text == "📦 Каталог")
async def catalog(message):
    await message.answer("Открываю каталог...")

# Убрать клавиатуру когда не нужна
@dp.message(F.text == "Скрыть меню")
async def hide_keyboard(message):
    await message.answer(
        "Клавиатура скрыта",
        reply_markup=ReplyKeyboardRemove()
    )

/setcommands
→ выбрать бота
→ ввести список:

start - Начало работы
menu - Главное меню
catalog - Каталог товаров
cart - Моя корзина
help - Помощь
settings - Настройки

from aiogram.filters import Command

@dp.message(Command("menu"))
async def show_menu(message):
    await message.answer("Главное меню:", reply_markup=main_menu())

@dp.message(Command("help"))
async def help_command(message):
    await message.answer(
        "Доступные команды:\n"
        "/start — начало работы\n"
        "/menu — главное меню\n"
        "/catalog — каталог\n"
        "/cart — корзина\n"
        "/help — эта справка"
    )

# Программная установка кнопки Menu через Bot API
from aiogram.types import MenuButtonWebApp, WebAppInfo

await bot.set_chat_menu_button(
    menu_button=MenuButtonWebApp(
        text="Открыть приложение",
        web_app=WebAppInfo(url="https://your-site.ru/app")
    )
)

<!-- Минимальная структура Mini App -->
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
    <script>
        const tg = window.Telegram.WebApp;
        tg.ready(); // инициализация

        // Цвет интерфейса из темы Telegram
        document.body.style.background = tg.themeParams.bg_color;

        // Главная кнопка внизу экрана
        tg.MainButton.setText('Оформить заказ');
        tg.MainButton.show();
        tg.MainButton.onClick(() => {
            // Отправляем данные в бота
            tg.sendData(JSON.stringify({ action: 'order', items: [] }));
        });
    </script>
</body>
</html>

# Универсальная структура с кнопкой Назад
def catalog_menu() -> InlineKeyboardMarkup:
    return InlineKeyboardMarkup(inline_keyboard=[
        [InlineKeyboardButton(text="👕 Одежда",     callback_data="cat_clothes")],
        [InlineKeyboardButton(text="👟 Обувь",      callback_data="cat_shoes")],
        [InlineKeyboardButton(text="🎒 Аксессуары", callback_data="cat_accessories")],
        [InlineKeyboardButton(text="← Главное меню", callback_data="back_main")],
    ])

# Хорошо: уникальные идентификаторы с контекстом
InlineKeyboardButton(text="Следующая →", callback_data="page:2")
InlineKeyboardButton(text="Товар 15",    callback_data="item:15")

# Плохо: одинаковые для разных действий
InlineKeyboardButton(text="Следующая →", callback_data="next")
InlineKeyboardButton(text="Назад",       callback_data="back")
# если используете несколько уровней — 'back' сработает непредсказуемо

Структура:
☐ Не более 3 уровней вложенности
☐ На каждом уровне (кроме первого) есть кнопка «Назад»
☐ /start всегда возвращает в главное меню
☐ /help показывает список доступных команд

Inline-кнопки:
☐ Не более 2–3 кнопок в одной строке
☐ callback_data уникальны и имеют паттерн action:id
☐ Каждый обработчик вызывает callback.answer()
☐ edit_message используется вместо отправки нового сообщения где возможно

Команды:
☐ Список команд задан через BotFather (/setcommands)
☐ Команды задокументированы кратко и понятно

Reply-клавиатура:
☐ resize_keyboard=True для компактного отображения
☐ Есть способ восстановить клавиатуру если пользователь её скрыл